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内 容 提 要 


本 书 是 界面 设计 领域 的 畅销 书 中 文 版 。 书 中 通过 30 多 个 故事 ， 曾 明了 如 何 
将 好 的 设计 原则 运用 到 实际 的 Web 应 用 程序 界面 中 ， 使 界面 引人入胜 ， 如 何 创 
造 完美 的 瞬间 ， 给 用 户 以 美好 的 体验 。 
本 书 适用 于 各 层次 Web 设计 人 员 和 开发 人 员 使 用 。 
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译 者 序 


随 着 Web 2.0 掀起 的 迅猛 风潮 ， 互 联网 在 今天 已 经 发 生 了 极 大 的 改 
变 。 旧 日 的 大 小 信息 网 站 有 如 昨日 黄花 ， 显 得 不 合 时 宜 ， 以 前 由 少数 
人 编辑 或 定制 内 容 的 互联 网 早已 变 得 更 为 开放 和 多 元 化 ， 以 前 的 “只 
读 式 互联 网 ” 变 成 了 “可 读 可 写 的 互联 网 ”。 我 们 身边 的 每 个 人 都 能 够 
为 其 添加 内 容 ， 贡 献 自己 的 力量 。 我 们 发 布 自 己 的 博客 ， 同 时 还 浏览 
其 他 人 的 博客 。 如 果 有 想 说 的 话 ， 我 们 还 会 发 表 评 论 或 回复 。 我们 为 
各 种 文章 标注 Tag 标签 进行 分 类 和 归 总 ， 婚 方便 了 自己 ， 又 方便 了 他 
人 。 我 们 点 击 查看 别人 的 照片 ， 同 时 也 上 传 自己 的 照片 。 我 们 订阅 各 
种 感 兴 趣 的 RSS。 我 们 使 用 Google 或 者 百度 就 好 像 在 图 书馆 里 自由 地 
检索 。 我 们 使 用 维基 百科 ， 而 且 只 要 愿意 也 有 自信 ， 还 可 以 为 其 添 砖 
加 瓦 。 我 们 在 今天 的 互联 网 上 学 习 新 技术 、 欣 赏 流 媒体 视频 、 交 流 读 
书 或 观 影 的 感想 、 结 交 和 披 此 倾 莫 的 朋友 。 这 是 一 个 史无前例 的 “共享 ” 
的 世界 。 


没 错 ， 史 无 前 例 。 在 这 个 也 许 几 年 前 根本 没 人 能 够 想象 的 平台 上 ， 作 为 
产品 开发 者 或 设计 者 的 我 们 ， 应 该 遵循 怎样 的 标准 才能 在 最 终 交 出 一 份 
完美 的 答卷 呢 ? 你 知道 ， 完 美的 答卷 就 意味 着 以 万 为 单位 的 点 击 量 、 良 
好 的 客户 口碑 ， 以 及 《最 重要 的 ) 丰厚 的 市 场 回 报 。 


我 想 你 已 经 知道 ，Web 2.0 的 主角 是 它 的 使 用 者 ， 也 就 是 我 们 所 说 的 用 
户 。 用 户 才 是 所 有 网 站 或 者 Web 应 用 的 评判 者 (当然 ， 也 是 财源 )。 用 
户 认为 我 们 提供 的 服务 物 有 所 值 ， 他 们 才 会 口 耳 相 传 ， 才 会 把 心得 写 到 
自己 的 博客 里 ， 才 会 像 苹果 教徒 "那样 成 为 你 的 拥护 者 。 用 户 从 不 会 手 拿 
标准 答案 来 为 我 们 的 产品 打分 ， 他 们 依据 的 是 自己 在 你 的 网 站 或 Web 应 
用 中 ， 每 一 次 发 出 指令 或 得 到 反馈 的 瞬间 体验 。 如 果 他 们 在 完成 任务 时 















































QD “苹果 教徒 ” 特 指 那 些 对 Apple 公司 具 极 高 品牌 忠诚 度 的 用 户 。 这 种 人 对 Apple 的 
产品 不 仅 只 是 单纯 地 使 用 ， 而 且 变 成 了 一 种 爱好 ， 其 激情 甚至 会 演变 为 着 魔 的 状 
态 。 表 现在 疯狂 搜集 相关 的 各 种 产品 、 纪 念 品 ， 在 新 产品 发 布 前 数 天 就 在 零售 店 前 
排队 ， 甚 至 用 Apple 公司 的 logo 进行 纹身 等 。 一 一 译 者 注 
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2 译 者 序 





感觉 不 到 麻烦 ， 那 么 你 的 得 分 就 是 “良好 ”， 如 果 他 们 在 此 基础 上 还 能 感 
到 成 功 的 欣喜 或 者 操作 的 愉悦 ， 那 么 评分 就 是 “优秀 ”。 


所 以 这 本 书 开篇 的 第 一 句 话 就 是 : 
良好 的 用 户 体验 ， 全 在 于 那些 完美 的 瞬间 。 


Robert Hoekman, Jr. 是 一 名 交互 设计 师 和 易 用 性 专家 。 他 曾 任 职 于 
GoDaddy.com、Macromedia、Adobe 等 多 家 知名 公司 ， 现 在 有 了 自己 的 工 
作 室 Miskeeto， 一 直 致 力 于 为 广大 受众 提供 优质 的 用 户 体验 服务 。 之 前 
他 所 著 的 Designing the Obvious (国内 译 版 名 为 《一 目 了 然 》)) 直观 地 向 
我 们 阐述 了 如 何 构 建 简洁 易 用 的 软件 显 性 设计 方法 ， 而 这 次 他 又 带 着 本 
书 的 英文 版 Designing the Moment 再 次 揭示 关于 “瞬间 ”的 秘密 。 


用 户 身 处 我 们 的 网 站 或 Web 应 用 中 ， 由 始 至 终 要 经 历 一 系列 瞬间 。 不 
管 是 了 解 新 特性 、 注 册 账 户 、 评 论 及 评分 ， 还 是 搜索 信息 、 填 写 表单 或 
者 订阅 RSS， 甚 至 在 他 们 取消 账户 准备 一 去 不 返 的 那些 时 刻 ， 所 有 这 
些 形 成 一 个 又 一 个 瞬间 的 体验 。Robert 根据 自己 的 亲身 经 历 和 设计 经 
验 将 其 归结 为 30 多 个 故事 ， 基 本 上 涵盖 了 所 有 可 能 出 现 的 瞬间 。 每 一 
个 瞬间 就 是 一 个 故事 ， 每 一 个 故事 的 结尾 都 有 一 个 最 合适 的 解决 方案 。 
Robert 从 不 讲 大 道理 ， 他 给 我 们 的 是 最 简单 、 最 直接 的 礼物 一 一 如 果 
你 从 没 研究 过 用 户 体验 ， 遇 见 问题 时 按 他 说 的 方法 去 做 就 不 会 出 贫 子 ; 
如 果 你 算是 半 个 专家 ， 书 中 字里行间 流露 的 智慧 和 思考 方式 也 会 让 你 受 
益 菲 浅 。 


而 且 ， 我 们 很 高 兴 地 看 到 他 并 没有 刻意 地 美化 自己 ， 而 是 把 每 次 失败 后 
探索 并 改进 的 全 部 过 程 都 展现 出 来 ， 甚 至 还 有 如 何 “ 虽 入 ”其 他 优秀 设 
计 的 手段 。 首 先 ， 再 知名 的 设计 大 师 也 会 出 错 ; 其 次 ， 我 们 能 领悟 什么 
叫做 “借鉴 ”而 不 是 “抄袭 ”， 而 最 重要 的 ， 我 们 将 从 中 学 习 到 如 何 发 现 
设计 的 不 足 并 持续 改进 的 方法 。 


感谢 图 灵 公 司 对 我 的 邀请 ， 翻 译 这 本 书 的 过 程 也 可 以 说 是 一 次 学 习 的 
过 程 。 其 中 有 些 章节 所 讲述 的 内 容 直接 用 在 了 我 手头 的 项 目 中 。 而 且 
Robert 的 旁 征 博 引 也 让 我 开阔 了 眼界 ， 了 解 了 很 多 以 前 尚未 接触 的 东 
西 ， 而 它们 都 非常 有 意思 。 所 以 我 真 的 很 希望 你 们 都 能 读 到 它 ， 相 信 
你 们 会 和 我 一 样 ， 翻 完 最 后 一 页 时 将 切实 感受 到 自己 又 迈 上 了 一 级 新 
的 台阶 。 
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译 者 序 3 


本 人 才 朴 学 浅 ， 尽 管 慎 之 又 慎 ， 译 文 仍 难免 有 玻 漏 之 处 。 奶 请 大 家 指正 ， 
希望 大 家 共同 交流 进步 : messiah.book@gmail.com。 





向 怡 宁 
2008 年 11 月 于 北京 
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了 路 


前 


良好 的 用 户 体验 ， 全 在 于 那些 完美 的 瞬间 。 


在 第 一 个 瞬间 ， 也 就 是 当 一 位 用 户 从 Google 搜索 结果 页 面 跳 转 到 某 个 网 
站 的 时 候 ， 他 此 刻 可 能 是 想 看 看 这 个 网 站 的 名 字 及 其 功能 ， 而 下 一 个 瞬 
间 可 外 E 就 开始 琶 麻 如 何 使 用 页 面 中 的 播放 器 来 观看 某 个 视频 介 绍 。 再 然 
后 则 可 能 是 寻找 从 哪里 注册 ， 或 者 看 看 商品 是 否 打折 ， 或 者 尝试 联系 这 


个 公司 。 








很 多 设计 师 总 喜欢 从 “标准 用 户 (Persona)”( 即 针对 某 类 产品 设想 的 典 
型 用 户 ) 身上 捕捉 那些 一 般 性 意图 。 但 上 述 这 些 目标 不 能 算是 生活 体验 ， 
而 更 应 算 作 交互 式 体 验 目标 。 


若 想 完成 优秀 的 设计 ， 我 们 就 需要 时 刻 自 问 : 在 这 个 瞬间 我 们 希望 用 户 
做 什么 ， 界 面 应 该 如 何 鼓励 他 们 完成 这 个 任务 ? 

而 且 还 需要 考虑 这 位 用 户 在 此 刻 的 目标 是 什么 ? 我 们 的 设计 又 如 何 帮助 
他 实现 他 的 目标 ? 他 的 目标 是 想 了 解 一 个 新 网 站 吗 ? 是 想 找到 某 些 具体 
的 信息 ?是 想 填 一 个 表格 ? 还 是 想 往 购物 车 里 面 塞 点 什么 ? 


每 一 个 瞬间 都 有 可 能 加 强 也 可 能 摧毁 用 户 对 某 个 产品 或 公司 的 信心 。 每 
一 个 瞬间 对 于 完整 的 用 户 体验 来 说 ， 都 是 不 可 或 缺 的 一 部 分 。 


何 出 此 言 ? 因为 每 个 人 在 每 个 时 刻 所 要 完成 的 任务 ， 对 于 此 时 的 他 而 言 ， 
那 就 是 最 重要 的 任务 。 

确保 每 时 每 刻 都 完美 ， 这 是 设计 师 的 职责 。 要 确保 我 们 的 用 户 在 这 个 瞬 
间 心 情 愉 快 ， 效 率 很 高 ， 从 而 自我 感觉 得 心 应 手 。 
我 们 的 工作 就 是 考虑 所 有 这 些 瞬 间 一 一 设计 一 些 东 西 来 支持 用 户 达 成 每 
一 个 目标 ， 而 不 会 干扰 或 者 妨碍 他 们 。 同 时 ， 把 这 些 完 全 不 同 的 部 分 凝 
聚 为 一 个 整体 。 


我 们 的 工作 不 是 设计 花哨 的 屏幕 ， 而 是 要 设计 美好 的 瞬间 。 
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无 论 是 简单 还 是 复杂 的 应 用 都 是 如 此 。 最 重要 的 是 ， 当 用 户 想 要 达到 其 
交互 目标 的 种 种 时 刻 ， 都 会 发 生 些 什么 。 


要 实现 优秀 设计 的 关键 之 一 ， 就 在 于 了 解 每 一 个 瞬间 需要 发 生 一 些 什么 
才能 完美 。 而 我 们 就 应 该 去 实现 它们 。 


CC 为 瞬间 而 导航 


在 每 一 个 瞬间 ， 用 户 都 将 发 出 各 种 各 样 的 行为 。 他 们 在 一 天 之 内 可 以 
从 Amazon 游民 到 Z Gallerie"， 然 后 可 能 做 出 从 注册 到 退出 之 间 的 任 
何事 情 。 


用 户 在 互联 网 上 的 行为 多 种 多 样 ， 有 输入 ， 有 编辑 ， 有 搜索 ， 有 调整 版 
面 ， 有 创建 ， 有 上 传 ， 有 删除 ， 有 共享 ， 有 组 织 ， 有 参与 。 这 些 都 是 设计 
师 希 望 用 户 进行 的 行为 。 在 大 多 数 情 况 下 ， 这 也 是 用 户 正 想 要 做 的 行为 。 


当然 ， 我 们 也 会 做 一 些 通常 自己 并 不 会 意识 到 的 事情 。 我 们 分 析 ， 我 们 
判断 ， 我 们 遗忘 、 犯 错误 、 走 神 、 改 变 主意 、 迷 失 方 向 、 感 到 困扰 。 而 
如 果 幸 运 的 话 ， 我 们 会 学 到 东西 ， 得 到 指引 。 我 们 会 有 新 的 想法 、 形 成 
记忆 、 熟 悉 、 信 任 、 灵 感 乍 现 ， 并 且 觉 得 自己 的 工作 富有 成 效 。 


正 是 这 些 行 为 才 让 我 们 成 为 活生生 的 人 。 这 本 书 就 是 要 讨论 如 何 设计 那 
些 文 持 所 有 此 类 行为 的 界面 一 一 在 用 户 需 要 进行 选择 的 那些 瞬间 ， 帮 助 
他 们 做 出 正确 的 决定 。 我 们 将 讨论 创建 怎样 的 交互 行为 以 鼓励 人 们 输入 、 
编辑 、 搜 索 和 共享 ， 激 励 他 们 完成 所 有 我 们 希望 他 们 做 的 事 。 我 们 还 将 
讨论 如 何 设计 各 种 手段 ， 来 帮助 人 们 提升 工作 效率 一 一 即使 他 们 天 生态 
性 大 、 老 出 错 ， 或 者 总 是 三 心 二 意 。 


更 确切 地 说 ， 这 本 书 收集 了 30 多 个 故事 ， 阐 明了 如 何 将 好 的 设计 原则 运 
用 到 实际 的 Web 应 用 程序 界面 中 去 ， 使 界面 引人入胜 ， 呼 之 欲 出 。 自 始 
至 终 ， 这 些 故事 都 将 以 批判 的 眼光 来 看 待 设计 ， 并 且 详 完 每 一 个 细节 ， 
力求 确保 人 类 一 一 这 种 时 常 犯错 而 又 行事 乖 张 的 生物 一 一 能 不 受 软 件 产 
品 的 限制 ， 而 又 自我 感觉 良好 。 


要 设计 美好 的 瞬间 ， 就 需要 做 到 以 下 几 点 。 






























































QZ Gallerie 是 一 个 主 营 家 居 装 饰 的 国际 电子 商务 网 站 。 网 址 为 www.zgallerie.com/。 
此 处 作者 意 指 用 户 从 A 得 到 Z。 一 一 译 者 注 
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国 介绍 一 种 具 启 迪 意 义 并 且 富 有 洞察 力 的 界面 设计 方法 ， 我 称 之 为 
“大 声 想 出 来 ”; 

国 以 批判 的 眼光 遍 查 用 户 与 Web 应 用 交互 的 每 一 个 阶段 中 的 每 一 个 
元 素 ， 一 次 就 看 一 个 瞬间 ， 

国 为 所 有 的 设计 一 一 从 页 面 布局 到 在 线 社区 一 一 推荐 一 整套 最 优 
方案 。 


最 重要 的 是 ， 本 书 探究 了 界面 的 种 种 微妙 细节 ， 它 们 在 用 户 使 用 的 每 一 
个 瞬间 如 何 改 善 或 是 破坏 用 户 的 体验 ， 进 而 探讨 了 应 该 如 何 对 每 一 个 细 
节 加 以 改进 。 


交互 的 设计 
本 书 的 结构 框架 遵循 了 用 户 进行 Web 应 用 操作 时 的 典型 步 又 ， 也 就 是 从 
一 开始 最 关键 的 “第 一 印象 ” 一 直到 最 后 他 们 退出 并 转向 别处 。 每 个 部 


分 的 标题 直接 与 这 些 行为 相关 ， 每 部 分 都 讲解 在 这 一 个 瞬间 用 户 实 实在 
在 要 做 的 事情 。 


第 一 部 分 到 第 三 部 分 讲述 的 是 当 用 户 打开 一 个 新 网 页 后 在 头 30 秒 钟 内 
所 要 做 的 事情 。 这 些 章节 里 面 的 故事 描述 了 他 们 首次 了 解 界 面 、 探 寻 方 
向 、 略 读 文 本 熟悉 更 多 情况 、 观 看 视频 和 动画 演示 ， 以 及 搜索 详细 信息 
等 情形 。 


第 四 部 分 到 第 六 部 分 则 是 关于 用 户 在 深入 我 们 的 网 站 时 所 做 的 事 。 一 旦 
他 们 决定 要 创建 自己 的 账号 ， 就 会 输入 信息 、 编 辑 内 容 、 管 理 数据 ， 以 
及 通过 种 种 方式 与 网 站 进行 交互 。 在 这 个 过 程 中 ， 每 一 个 瞬间 都 有 可 能 
持久 地 影响 他 们 对 网 站 的 信心 和 好 感 。 


第 七 部 分 则 关注 当 用 户 离开 网 站 
时 所 要 发 生 的 事情 。 


换 名 话说， 我 有 意 地 将 这 整 本 书 的 结构 做 如 此 安排 。 其 目的 是 使 它 能 
现 出 当 用 户 面 对 Web 应 用 时 由 始 至 终 的 所 有 细节 。 我 们 将 详细 地 探讨 人 
机 对 话 中 的 每 一 个 阶段 ， 不 管 它 是 只 有 3 秒 钟 还 是 将 会 持续 两 年 。 如 果 
用 一 句 话 来 概括 ， 那 就 是 在 这 些 故事 中 所 讨论 的 元 素 将 会 宫 括 在 线 用 户 
体验 的 完整 情境 。 
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不 管 是 暂时 离开 还 是 永久 离开 一 一 
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这 样 的 顺序 安排 也 方便 你 在 日 后 能 够 随时 翻阅 ， 把 这 本 书 当 作 某 种 “ 灵 
感 参考 指南 ”来 使 用 。 如 果 你 在 大 半年 后 为 了 某 个 编辑 功能 的 设计 而 一 
筹 莫 展 ， 可 以 打开 书 里 相应 的 章节 第 五 部 分 ) 读 几 页 ， 很 有 可 能 会 得 
到 不 少 启发 。 


而 这 些 都 是 源 于 “ 讲 故 事 ”这 种 永 不 过 时 的 艺术 。 
来 自 真 实 世界 的 问候 


在 这 些 故事 里 ， 有 一 些 讲述 了 如 何 贯彻 和 实施 那些 常见 的 设计 原则 ， 还 
有 些 则 会 探讨 你 可 能 从 未 遇见 过 的 个 别 情况 。 有 一 些 故 事 提 出 了 新 的 见 
解 和 看 法 ， 还 有 些 则 似乎 是 老生 常 谈 。 不 论 怎样 ， 它 们 存在 的 目的 都 是 
为 了 启发 你 的 思维 ， 揭 示 各 种 事实 和 发 现 ， 提 出 理论 培养 直觉 ， 最 终 让 
你 能 设计 出 各 个 伟大 的 瞬间 。 


在 Designing the Obvious (之 前 我 写 的 一 本 书 ) "中 ， 我 详细 地 阐述 了 关 
于 Web 应 用 设计 的 七 个 核心 原则 。 在 此 基础 上 形成 了 一 套 通 用 的 方式 方 
法 ， 能 够 举一反三 、 成 功 地 应 用 到 任何 Web 项 目 中 去 。 


而 在 本 书 中 ， 我 用 一 系列 故事 来 演示 我 是 如 何 把 这 些 想法 和 观点 应 用 到 
实际 项 目 中 的 ， 从 而 为 用 户 创 造 出 令 其 印象 深刻 的 瞬间 。 与 此 同时 ， 我 
还 继续 提出 了 大 量 新 的 想法 和 观点 。 

这 些 故 事 有 些 是 我 的 亲身 体验 ， 是 我 日 常 在 进行 设计 时 碰 到 的 问题 ， 而 
有 些 则 是 全 新 的 故事 ， 是 我 专门 为 了 本 书 而 设计 的 。 

所 有 的 故事 都 直接 源 自 那些 痴迷 于 几乎 任何 交互 式 设 计 的 设计 师 们 头脑 
中 的 想法 。 他 们 当中 有 些 人 在 深夜 辑 转 反 侧 地 思索 当地 的 快餐 厅 应 当 如 
何 摆 放 饮料 机 才能 方便 消费 者 ， 还 有 些 人 则 花费 大 量 时间 撕 摩 那些 获取 
用 户 体验 的 各 种 瞬间 ， 想 方 设法 地 加 以 改进 。 

大 声 地 做 出 决定 


在 Designing the Obvious 的 末尾 ， 我 谈 到 了 勇敢 做 出 决定 的 重要 性 哪 
怕 明 知 这 些 决定 在 以 后 肯定 会 改变 。 不 论 决定 的 有 效 性 能 持续 多 长 时 间 ， 































































































GD Designing the Obvious 由 New Riders 出 版 社 于 2006 年 10 月 出 版 。 网 址 为 http:// 
rhjr.net/dto/。 该 书 的 中 文 版 由 机 械 工 业 出 版 社 于 2008 年 1 月 出 版 ， 书 名 《一 目 了 
然 》。 译 者 注 
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前 言 5 


都 必须 做 出 决定 ， 使 这 个 设计 中 的 所 有 地 方 都 按 此 决定 来 考虑 ， 并 且 有 
意 为 之 。 决 不 能 听天由命 。 


在 本 书 中 ， 我 尝试 做 一 些 之 前 从 没 做 过 的 事情 : 把 做 出 那些 决定 的 详细 
过 程 全 部 揭晓 并 且 逐 步 剖 析 给 大 家 。 


我 希望 能 揭示 出 “持续 改进 ”这 一 设计 方法 的 重要 性 。 我 将 向 你 们 展示 
绝对 需要 采用 迭代 的 方法 才能 达到 好 的 结果 。 我 将 向 你 们 展示 如 何 应 用 
设计 原则 、 探 索 、 经 验 、 直 觉 其 至 感觉 来 指导 设计 过 程 。 


换 名 话说， 我 大 声 地 做 出 所 有 决定 。 


我 承认 自己 犯 过 错误 ， 也 从 其 他 人 那里 学 到 很 多 ， 我 向 你 们 展示 好 的 设 
计 其 实 是 一 大 堆 差 的 设计 最 终 进化 的 结果 。 希 望 通过 这 样 做 ， 你 们 将 发 
现 好 的 设计 绝 不 是 单纯 因为 天 才 的 创意 或 者 灵感 爆发 的 一 瞬间 而 产生 的 ， 
它 是 持续 前 进 的 永恒 动力 所 造就 的 产物 。 


多 年 之 后 你 也 可 以 重新 翻阅 这 本 书 ， 并 且 质 疑 我 所 做 的 这 些 决定 。 可 能 
那 时 你 会 发 现 我 在 这 里 所 说 的 一 切 对 你 来 说 都 幼稚 得 可 笑 ， 而 自己 早已 
经 超越 了 我 所 在 的 高 度 。 让 这 一 切 在 你 身上 发 生 ， 是 我 最 大 的 心愿 。 

我 把 自己 敞开 给 你 ， 是 希望 能 帮助 你 学 习 “ 如 何 质 疑 自 己 ”: 在 每 一 个 设 
计 中 找到 缺点 ， 并 且 不 断 地 寻找 方案 来 改进 它 。 

开始 交流 

这 本 书 决 不 是 一 本 所 谓 Web 界面 的 权威 性 指南 读物 。 它 只 是 一 个 交流 的 
开始 ， 其 目的 是 让 你 思考 。 

书 里 所 说 的 都 不 是 什么 权威 或 者 官方 的 答案 ， 因 为 本 来 就 没有 什么 权威 
或 者 官方 的 答案 。 当 我 向 你 具体 推荐 什么 的 时 候 ， 那 只 是 基于 我 自身 的 
经 验 、 观 点 和 认识 。 其 至 有 时 候 ， 它 们 仪 仅 只 是 基于 我 的 直觉 (直觉 是 
每 一 位 设计 师 都 应 当 具 有 并 且 相 信 的 东西 )。 

因此 ， 我 几乎 可 以 保证 ， 你 将 会 发 现 某 些 地 方 你 能 做 得 更 好 一 一 你 肯定 
会 找到 一 些 我 没 想到 的 办 法 来 让 你 的 用 户 拥有 更 美好 的 瞬间 。 如 果 你 做 
到 了 ， 我 希望 你 说 出 来 。 不 要 做 一 个 整 天 身 在 靠背 椅 里 面 的 设计 师 
走出 去 ， 告 诉 人 们 你 所 做 的 改进 。 

把 你 的 意见 和 想法 发 邮件 告诉 我 。 把 它们 放 在 你 的 博客 里 面 去 。 把 它们 
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告诉 你 的 朋友 。 最 好 也 告诉 你 的 同事 ， 还 有 你 的 老板 。 

我 从 不 认为 自己 是 这 个 星球 上 知识 最 渊博 的 设计 师 ， 也 从 没 相信 过 自己 
做 的 一 切 都 是 金 科 玉 律 。 一 直 以 来 我 都 是 从 其 他 人 身上 学 习 并 获得 灵感 。 
通过 这 本 书 ， 我 希望 向 你 传授 知识 并 激发 你 的 灵感 ， 但 同时 也 强烈 地 相 
信和 希望， 最 终 你 也 能 像 我 一 样 地 传授 给 其 他 人 。 


如 果 你 有 什么 好 的 想法 和 意见 ， 请 告诉 大 家 。 让 交流 继续 。 


即使 已 经 尽 了 最 大 的 努力 ， 仍 然 是 没有 最 好 ， 只 有 更 好 。 书 中 提 到 的 这 
些 设计 我 已 经 尽 了 自己 最 大 的 努力 ， 但 如 果 你 发 现 有 什么 方法 能 更 进 一 
步 ， 请 大 声 地 告诉 大 家 ! 


C 因此 你 也 不 必 做 笔记 


输入 在 书 里 找到 的 那些 URL 网 址 链接 真 的 是 一 件 非常 繁琐 的 事 。 你 需要 
一 个 字母 一 个 字母 地 边 看 边 输入 。 为 了 避免 这 个 讨厌 的 过 程 ， 我 为 书 里 
面 出 现 的 所 有 网 站 、Web 应 用 程序 、 博 客 回复 、 文 章 、 研 究 论文 和 其 他 
参考 资料 创建 了 一 个 存档 。 在 书 里 你 不 会 看 到 一 个 URL 网 址 链接 "。 如 
果 你 想 在 那里 进行 深入 研究， 请 访问 网 站 https:/rhoekmanjrbackpackit. 
com/pub/1828580-designing-the-moment-links-from-the-book， 点击 “Links 
from the book” 链 接 。 


不 需要 再 吃 嗪 什么 了 ， 让 我 们 开始 吧 。 




































































中 为 了 便于 读者 查阅 ， 本 书 以 脚注 形式 给 出 了 所 有 引用 的 链接 地 址 。 一 一 译 者 注 
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2 ”第 一 部 分 指引 用 户 





在 互联 网 上 探索 ， 毫 无 浪漫 可 言 。 我 们 不 是 Lewis 和 Clark ， 把 自己 的 
所 有 家 当 打 完 包 然 后 一 头 扎 和 人 西部 去 发 现 美国 未 知 的 领土 。 不 要 幻想 在 
网 络 中 能 找到 什么 尘封 的 宝藏 。 而 且 除了 经 常 使 用 的 Google 和 电子 邮件 
之 外 ， 你 的 大 胆 探 索 一 般 来 说 也 不 会 获得 什么 丰厚 的 回报 。 


探索 万 维 网 通常 都 带 有 一 定 的 功利 心 ， 就 好 像 你 第 一 次 光临 茶 家 新 店铺 
一 样 。 尽 管 曾 经 逛 过 上 千家 店铺 ， 但 是 我 们 仍然 会 觉得 新 店铺 和 之 前 的 
那些 有 所 区 别 ， 因 此 我 们 需要 先 熟悉 熟悉 这 个 新 的 环境 。 


与 此 相似 ， 当 我 们 面 对 一 个 并 不 熟悉 的 网 页 时 ， 通 常 都 会 完 扫 视 一 下 整 
个 页 面 ， 试 图 了 解 这 个 网 站 大 概 的 用 途 ， 然 后 再 决定 自己 是 和 否 应 该 更 深 
入 地 浏览 ， 点 开 网 站 其 他 的 页 面 去 四 处 逛 逛 。 


这 样 一 个 “着 陆 ” 的 过 程 ， 对 于 树立 用 户 对 网 站 的 信心 以 及 引导 用 户 进 
行 深入 探索 ， 是 非常 重要 的 。 


那么 ， 作 为 Web 设计 师 ， 我 们 的 工作 就 是 要 帮助 用 户 “ 着 陆 ” 而 且 越 
快 越 好 。 出 于 这 个 原因 ， 本 书 最 开始 几 音 首先 讨论 用 户 第 一 次 访问 某 个 
站 点 的 头 30 秒 钟 内 将 会 发 生 的 事情 。 


在 这 片刻 之 内 ， 我 们 需要 完成 以 下 几 件 事 : 


国 设计 吸引 人 的 第 一 印象 ; 
国 以 明确 的 路 线 来 提供 信息 ; 
国 提供 工具 指引 用 户 
国 把 观光 客 转变 为 消费 者 。 
所 以 在 头 几 个 故事 中 ， 我 们 将 巡视 从 页 面 布 局 到 导航 、 从 搜索 结果 到 视 


频 演 示 的 方方面面 ， 来 看 看 所 有 这 些 元 素 究竟 如 何 帮助 我 们 达到 目的 ， 
同时 让 用 户 尽 快 地 适应 我 们 的 网 页 。 


















































Q@ Lewis 和 Clark 是 美国 探险 家 。 他 们 于 19 世纪 初 进行 了 历时 三 年 的 “Lewis 和 Clark 
探险 ”(Lewis & Clark Expedition )， 深 入 西部 荒野 。 这 也 是 美国 人 第 一 次 横 跨 北美 
大 陆 ， 在 美国 西部 开发 史上 意义 深远 。 一 一 译 者 注 
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第 1 章 
令 人 心动 的 第 一 印象 





人 们 常 说 第 一 印象 往往 会 给 人 留 下 一 生 的 记忆 。 对 于 一 个 网 站 而 言 ， 这 
一 说 法 也 同样 成 立 。 但 遗憾 的 是 注意 到 这 一 点 的 站 点 并 不 是 很 多 。 


有 人 说 Steve Jobs， 这 位 Apple 公司 无 戎 的 领导 者 ， 对 第 一 印象 非常 执 
著 。 也 许 这 可 以 解释 为 什么 Apple 公司 的 产品 总 能 在 第 一 时 间 就 吸引 
人 们 的 眼球 。 


哪怕 是 打开 一 台 还 在 包装 盒 里 的 轿 新 的 MacBook Pro， 就 足以 让 人 流 口 
水 。 首 先 ， 单 爷 外 包装 就 令 人 满怀 期 望 和 惊 言 。 而 一 旦 打开 包装 盒 ， 将 
MacBook 安置 在 书 昌 上 ， 它 的 启动 过 程 从 第 一 个 瞬间 开始 就 极 富 魅 力 。 
伴随 着 棚 棚 如 生 的 动画 ， 它 用 多 种 语言 向 你 表示 欢迎 ， 会 自动 搜索 网 络 
连接 ， 提 示 你 把 之 前 Mac 电脑 中 所 有 的 数据 和 存档 备份 到 新 电脑 中 来 ， 
还 让 你 在 一 片 端庄 雅致 的 桌面 背景 之 上 进行 设置 ， 一 切 都 为 用 户 考虑 得 
细致 入 微 ， 让 这 整个 过 程 毫 不 费力 。 

要 把 这 一 切 搬 到 互联 网 上 则 并 不 容易 。 不 过 ， 设 计 一 个 引 人 注 目 、 令 人 
动心 的 页 面 仍然 是 我 们 工作 中 不 可 缺少 的 一 部 分 。 


前 不 久 有 一 位 客户 来 找 我 ， 带 着 一 大 堆 关 于 首页 设计 的 需求 。 他 在 设计 
一 个 专门 面向 平面 设计 师 的 社区 网 站 。 他 已 经 完成 了 一 项 困难 的 工作 ， 
就 是 精简 了 需求 列表 ， 只 保留 了 那些 真正 有 用 、 确 实 与 网 站 用 户 相 关 的 
部 分 。 而 我 所 要 做 的 就 是 把 这 份 列表 转变 成 美好 的 第 一 印象 。 


由 于 这 个 网 站 主要 针对 平面 设计 师 ， 因 此 它 的 首页 需要 一 个 中 心 区 域 突 
出 展示 大 量 富 有 特色 的 图 片 ， 同 时 还 需要 一 些小 区 域 来 安排 用 户 的 账号 
信息 、 网 站 特色 项 目 以 及 登录 框 。 当 然 ， 页 面 中 还 需要 包括 那些 常见 元 
素 ， 如 网 站 logo、 欢 迎 嫩 、 导 航 栏 、 搜 索 框 以 及 页 脚 信息 等 。 

另外 ， 就 算 这 些 相对 来 说 尚 可 应 付 ， 网 站 首页 还 需要 放置 一 些 关于 业界 
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4 第 1 章 令 人 心动 的 第 一 印象 
和 站 点 本 身 的 头条 新 闻 以 及 摘录 片段 。 


仅 展示 图 片 一 项 就 将 占据 很 大 一 块 的 页 面 空间 。 要 将 其 他 所 有 栏目 都 加 
进来 ， 同 时 还 要 包括 新 闻 区 域 ， 就 显得 有 些 环 手 了 。 别 忘 了 ， 即 使 首页 
的 所 有 这 些 部 分 都 能 完美 地 展现 ， 能 让 用 户 得 到 他 们 想 要 的 东西 ， 但 毕 
况 这 个 站 点 主要 的 业务 目的 是 吸引 浏览 者 们 注册 并 成 为 该 社区 的 成 员 。 
因此 我 需要 一 种 设计 诱 使 用 户 注意 到 Sign Up Now 现 在 就 注册 〉 按钮 ， 
同时 让 他 们 想 要 去 单 击 它 。 


C1.1 发 现 页 面 布 局 


我 一 开始 努力 尝试 去 发 现 页 面 的 布局 。 对 于 页 面 设 计 而 言 ， 布 局 是 其 中 
最 基础 的 元 素 。 


我 在 这 里 用 到 了 “发 现 ” 这 个 词 ， 因 为 页 面 的 布局 设计 并 不 一 定 出 自 于 
设计 师 本 号。 当 我 想到 页 面 布局 的 时 候 ， 经 常会 联想 到 Bob Ross。 这 个 
画家 最 让 人 津津 乐 道 的 一 点 ， 就 是 他 能 将 随意 酒 到 画布 上 的 颜料 加 工 成 
一 副 满 是 “快乐 的 树 ” 的 风景 画 "。 他 总 是 根据 绘图 的 进展 随机 应 变 ， 决 
定 下 一 步 该 做 什么 。 

明白 了 吧 ， 不 是 你 选择 页 面 布局 ， 而 是 它 选择 了 你 。 

布局 是 内 容 组 织 的 必然 结果 ， 它 往往 是 自己 逐渐 成 形 的 。 一 旦 周全 考虑 了 
页 面 的 所 有 需求 ， 并 且 确 定 了 每 一 块 的 内 容 ， 你 的 工作 就 变 成 了 看 着 所 想 
要 的 布局 自己 展现 在 你 眼前 。 这 就 好 像 你 不 断 地 切削 石膏 直到 雕塑 成 型 。 
在 开始 安排 页 面 内 容 时 ， 我 会 秉承 这 一 最 基本 的 (同时 也 相当 复杂 的 ) 
设计 方法 。 简 单 来 说 ， 我 把 所 有 的 栏目 区 域 都 扔 到 显示 屏 上 ， 然 后 移 来 
移 去 不 断 地 调整 让 它们 彼此 协调 。 

这 个 过 程 有 点 类 似 玩 拼图 游戏 ， 只 不 过 没有 盒子 封面 那 张 最 终 完成 的 图 
作 提 示 ， 而 且 拼 图 的 每 一 个 部 分 都 能 任意 改变 大 小 。 
























































GD Bob Ross (1942 一 1995) 是 美国 当代 最 富 盛 名 的 自然 主义 绘画 大 师 。 他 出 神 入 化 的 
技巧 、 行 云 流 水 式 的 画 风 ， 开 创 了 绘画 的 新 纪元 。 他 曾经 主持 了 美国 最 广为人知 的 
艺术 类 电视 节目 “绘画 的 乐趣 ” 教 观众 如 何 绘制 “快乐 的 树 尖 “快乐 的 云彩 ”和 
“快乐 的 群 山 ”。 在 节目 每 一 集 的 末尾 他 都 会 说 :“ 绘 画 时 没 人 会 犯错 误 ， 那 只 是 
些 快乐 的 小 意外 。” 一 一 译 者 注 
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我 最 先 考 虑 的 是 主要 图 片 展示 部 分 ， 因 为 它 需 要 的 区 域 最 大 。 与 此 同时 我 
也 颇 为 得 意 地 创建 了 一 个 宽 宽 的 区 域 放 置 新 闻 ， 因 为 它 需 要 空间 显示 文 
章 的 摘录 片段 。 至 于 My account (我 的 账户 )、Navigation〈 导 航 栏 ) 以 及 
Featured item〔 网 站 特色 项 目 )， 我 把 它们 平等 对 待 ， 放 在 了 页 面 左 侧 。 


几 分 钟 之 后 ， 我 得 到 了 第 一 个 版 本 ， 见 图 1-1。 













































































图 1-1 


这 时 我 突然 感觉 到 新 闻 部 分 似乎 太 宽 了 。 这 个 宽度 能 让 我 显示 很 长 的 头 
条 ， 也 能 放 很 多 摘录 内 容 ， 但 同时 它 也 不 便于 继续 划分 区 域 ， 分 别 去 显 
示 关 于 站 点 的 内 容 和 关于 业界 的 内 容 。 为 了 纠正 这 一 点 ， 我 把 该 区 域 分 
开 为 两 列 ， 见 图 1-2。 


好 多 了 。 


随后 我 又 意识 到 另外 一 个 问题 。 刚 开始 设计 时 ， 我 猜测 自己 可 能 需要 3 
列 来 放置 所 有 的 内 容 。 而 现在 发 现 完全 不 需要 那么 多 栏目 就 能 够 解决 问 
题 ， 因 此 我 移 去 了 第 三 列 。 然 后 我 加 大 了 左 侧 列 的 宽度 ， 这 样 能 为 站 点 
导航 栏 和 网 站 工具 列表 留 下 更 多 的 生存 空间 。 与 此 同时 也 加 宽 了 主要 内 
容 区 ， 从 而 有 了 更 多 地 方 来 放置 特色 图 片 和 新 闻 。 如 图 1-3 所 示 。 
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图 1-3 
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1.1 发 现 页 面 布 局 7 





现在 页 面 开 始 成 型 了 。 整 个 网 页 更 突出 了 站 点 的 主要 目的 一 一 展示 社区 
成 员 的 艺术 创作 以 及 相关 新 闻 。 所 以 我 确信 自己 的 方向 正确 。 嗯 ， 继 续 
前 进 。 

我 知道 首页 主要 的 目的 是 吸引 或 者 说 诱 使 ) 用 户 注册 ， 因 此 我 把 注意 
力 放 在 了 注册 区 域 。 

一 般 来 说 注册 区 域 都 需要 一 些 颇具 号 召 力 的 标语 和 一 个 按钮 。 所 以 我 随 
便 写 了 一 些 字 ， 做 了 一 个 按钮 ， 然 后 把 它们 丢 进 去 。 如 图 1-4 所 示 。 
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就 这 么 简单 。 
现在 请 允许 我 稍微 扯 一 些 题 外 话 。 
“Automattic” 的 一 次 飞跃 


此 前 ， 我 为 Automattic “公司 主持 过 一 次 有 关 设 计 方面 的 研讨 会 。 会 上 我 
们 讨论 了 这 个 公司 颇 受 欢迎 的 博客 软件 WordPress2。 讨 论 过程 中 我 











Q@ Automattic 公司 的 网 址 为 http://automattic.com/。 一 一 译 者 注 
@) WordPress 的 网 址 为 http://wordpress.com/。 译 者 注 
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8 第 1 章 令 人 心动 的 第 一 印象 


和 Automattic 一 位 叫做 Andy Skelton 的 员工 一 起 设法 为 WordPress.com 
首页 做 了 一 点 小 改动 ， 目 标 是 提升 网 站 的 注册 率 。 


我 们 由 原先 的 设计 开始 。 见 图 1-5。 
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图 1-5 








我 为 该 页 面 创建 了 一 个 框图 ， 便 于 演示 和 分 析 结 构 (有 些 地 方 则 直接 使 
用 了 屏幕 截图 )。 关 于 如 何 让 更 多 人 关注 注册 区 域 ，Andy 和 我 商量 出 了 
一 些 办 法 。 我 挪 走 了 那个 蓝 色 的 Start your WordPress Blog (开始 你 自己 
的 WordPress 博客 )， 用 一 个 很 大 的 黄色 Banner 区 域 替 代 ， 并 在 里 面 放 
了 一 个 夸张 的 Sign Up Now!〔 现 在 就 注册 ! ) 按钮 。 这 样 不 仅 能 让 用 户 
更 容易 注意 到 注册 区 域 ， 而 且 它 把 该 区 域 和 页 面 其 他 部 分 清晰 地 分 隔 开 
来 。 如 图 1-6 所 示 。 
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CA) WORDPRESS 





Sign Up Features Support Story Advanced 


What's happening right now on WordPress.com? 
Featured post: someblog.com Already Hip? 


Post title Username: 

hoek 
Post body post body post body post body post body post body post body rhockmanjr 
post body post body post body post body post body post body post body Password: 
post body post body post body post body post body post body post body 


post body post body post body. er === 
DRemember me ( Logn ) 
Post body post body post body post body post body (Bead more ,,,) Lost your password? 
Today's Hot Blogs More > Today's Hot Posts More * 
WordPress News 
CNN Political Ticker 价 Netflix cuts prices...for DVDs and its 
ICAN HAS CHEEZBURGER? pg De 了 了 
py 1 y iti ly Facel 
加 i Romney says lighten up’ to sign critic 和 
IZ NICETHX 
38 Pitches 时 notice in your 
和 村 Four Taos teens kicked off train 600 dashboard? 
Tennis Planet Rs 





图 1-6 


由 此 ， 该 公司 的 视觉 设计 师 兼 前 端 开 发 人 员 Matt Thomas 设计 了 新 页 面 
的 最 终 美 术 效果 并 开始 改写 代码 。 几 个 小 时 后 首页 就 大 功 告 成 了 了 《这些 
家 伙 真 的 一 点 都 不 浪费 时 间 ! )。 


设计 时 我 们 商量 把 Sign Up Now 按钮 改 成 绿色 ， 这 样 它 将 和 页 面 中 其 他 
所 有 元 素 形 成 鲜明 对 照 ， 效 果 更 加 突出 。Matt 试 了 试 ， 感 觉 很 不 错 ， 于 
是 他 更 新 了 首页 。 图 1-7 是 最 终 的 结 
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Sign Up Features Support Story Advanced 


Express yourself. Start a blog. 
See our free features» 


1,383,169 BLOGS WITH 57,645 NEW POSTS TODAY 





Already Hip? 


Hawt Post More» Username 


Password 
Move over, fake Steve Jobs 
This is admittedly very, very inside. But someone on WordPress 
launched this week a site called Michael Arrington's Lost your password? 
CrunchFood, which would appear to be a knowing parody of the 
formidable TechCrunch site. Whoever is writing it has a [...] 

The Browser: Analyzing the tech bz WordPress News 


口 kememberme (loom ) 





Your WordPress ls Im 
My Facebook 





News Departments More» 
tice 
4 IN SPORTS 中 IN WORLD rd? 
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Windows Live Writer 
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Redoable Lite 
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Chomsky Joins Hard Rock Hotel 
San Diego 
Right Now in Tags More > 


Art Books Culture Family Food Friends Humor Life Love Movies Music News 
Personal Photography Poetry PoOlitics Random Religion Thoughts Travel Video Media 
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Terms of Service Privacy Support Stats Co omattic, Inc AUTOMATTIC 





图 1-7 


我 们 所 做 的 工作 如 下 : 增 大 了 注册 区 域 ， 写 了 一 句 颇 具 号 召 力 的 标语 
[Express yourself. Start a blog《〈 创 建 博客 ， 表 达 自 我 )]， 同 时 还 把 Sign 
Up Now 按钮 做 得 又 大 又 美观 。 此 外 我 们 把 这 个 按钮 设置 为 绿色 ， 这 样 它 
就 能 从 页 面 中 脱 蜂 而 出 。 这 些 改动 创建 了 一 条 清晰 的 通道 ， 带 领 浏览 者 
们 前 往 注册 页 面 ， 那 里 也 正 是 我 们 想 要 他 们 去 的 地 方 。 


当时 对 于 这 个 新 设计 能 提升 多 少 站 点 注册 率 ， 每 个 人 的 看 法 不 一 。 而 
Matt 是 其 中 最 乐观 的 一 位 ， 他 猜测 注册 率 将 会 提升 10%。 
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而 事实 证 明 ， 这 点 小 小 的 设计 改动 产生 了 相当 大 的 效果 ， 超 出 了 
Automattic 团队 所 有 人 的 预期 。 


新 页 面 上 线 后 的 第 一 天 ， 新 的 博客 注册 率 和 用 户 注 册 率 分 别提 高 了 大 约 
12% 和 14%。 这 足以 好 好 庆祝 一 番 了 ， 但 这 还 不 是 最 后 的 结果 。 


接 下 来 的 几 周 内 ， 注 册 率 提高 到 了 25%， 并 且 稳定 地 保持 在 这 个 水 乎 。 
小 小 的 改动 却 带 来 巨大 的 飞跃 。 特 别 是 当 我 们 考虑 到 WordPress.com 每 
个 月 都 会 迎 来 数 百 万 名 浏览 者 这 一 事实 。 所 以 ， 如 果 你 以 前 怀疑 过 设计 
能 够 改变 项 目的 命运 ， 那 么 ， 现 在 开始 相信 吧 。 


因为 这 一 点 ， 我 认为 自己 在 这 个 社区 网 站 上 能 更 好 地 把 用 户 的 视线 引导 
到 注册 区 域 来 。 


C1.2 引导 用 户 的 视线 


我 发 现 ， 如 果 把 注册 区 域 移 到 主要 图 片 展示 区 的 下 面 ， 就 能 创造 出 一 种 
被 称 为 是 Diagonal Balance (对 角 线 平衡 ) 的 和 谐 状态 。 这 个 设计 理念 源 
自 于 “十 腾 堡 "图 表 ”。 

1.2.1 应 用 古 腾 堡 图 表 

人 们 在 浏览 页 面 或 布局 的 时 候 ， 视 线 往 往 趋向 于 从 左上 角 移动 到 右 下 角 ， 
就 好 像 页 面 的 布局 设计 有 某 种 自然 引力 一 样 。 因 为 人 们 通常 都 是 从 左 至 
右 、 由 上 往 下 地 阅读 ， 久 而 久之 视线 自然 会 沿 着 这 一 路 径 移 动 。 古 腾 堡 
图 表 简单 地 描述 了 这 一 阅读 轨迹 规 律 ， 见 图 1-8。 



































图 1-8 





中 约翰 ，。 古 腾 堡 (Johannes Gutenberg，1400 一 1468)， 德 国 印刷 工人 ， 传 统 上 认为 是 
他 发 明了 西方 的 活字 印刷 术 。 译 者 注 
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古 腾 保 图表 中 ， 左 上 角 是 第 一 视觉 落 点 区 (Primary Optical Area，POA )， 
而 右 下 角 则 是 最 终 视觉 落 点 区 (Terminal Anchor，TA)。 与 之 相对 ， 右 上 
角 和 左下 角 则 是 视觉 讶 点。 因此， 采用 对 角 线 平衡 通常 都 是 一 个 好 设计 
所 需要 考虑 的 因素 ， 因 为 设计 师 遵 从 了 用 户 习 惯性 的 眼 动 规律 。 


简单 来 说 ， 为 了 实现 “对 角 线 平衡 ”的 布局 设计 ， 我 们 可 以 运用 视觉 元 素 
来 创建 一 条 虚拟 的 “ 线 ”， 让 用 户 的 视线 跟随 它 从 左上 到 右 下 旦 对 角 线 似 
地 移动 。 这 条 对 角 线 就 像 箭头 一 样 指向 最 终 视觉 落 点 。 

举 个 例子 。 在 Mini 汽车 的 美国 官网 首页 上 ， 动 画 里 各 个 元 素 出 现 的 先后 
次 序 同 样 也 采取 了 对 角 线 设计 。 首 先 ， 网 站 的 logo 标志 出 现在 页 面 的 左 
上 角 ， 见 图 1-9。 

































































图 1-9 


然后 页 面 上 画 出 了 一 个 矩形 线 框 ， 从 左上 角 到 右 下 角 以 动画 形式 出 现 ， 
见 图 1-10。 
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图 1-10 


最 后 ， 一 系列 Mini Cooper 的 小 车 模 从 右 下 角 驶 入 屏幕 ， 见 图 1-11。 











THE ALWAYS OPEN MINI COOPER S CONVERTIBLE. STARTING AT $26,050.* 
4 AIRBAGS WITH SIDE-THORAX PROTECTION. 





图 1-11 








我 们 常见 的 对 话 框 也 同样 遵循 了 从 左 至 右 、 由 上 往 下 的 视觉 大 
1-12 所 示 。 
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Bullets and Numbering 
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口 | > V 
口 从 > V 
口 | 作 > V 


(CCustomize... ) 
图 1-12 
看 上 去 很 熟悉 吧 ? 就 是 这 样 。 


为 了 把 这 一 方式 应 用 到 客户 的 主页 上 ， 我 交换 了 注册 区 和 图 片 展示 区 的 


位 置 ， 使 站 点 logo 和 Sign Up Now 按钮 之 间 形 成 了 一 条 对 角 线 ， 如 图 
1-13 所 示 。 
















































































图 1-13 
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然而 ， 为 了 让 这 个 社区 的 页 面 真正 地 焕发 光彩 ， 我 还 需要 加 入 一 点 颜色 。 
1.2.2 ”使 用 颜色 来 吸引 注意 
颜色 能 把 人 的 注意 力 吸引 到 特定 的 元 素 上 去 ， 而 且 效 果 非 常 奇 妙 ， 尤 其 
当 某 个 元 素 的 颜色 与 其 他 的 形成 反差 时 更 是 如 此 。 相 对 于 一 致 性 来 说 ， 
人 类 对 物体 间 的 差异 性 更 为 敏感 。 因 此 在 页 面 中 加 入 一 些 颜色 ， 可 以 非 
常 有 效 地 把 浏览 者 的 视线 引导 到 我 们 希望 他 们 看 到 的 地 方 。 

为 了 着 重 强调 在 首页 中 采用 对 角 线 平衡 设计 ， 我 把 站 点 logo 的 主 色调 海 


蓝 色 应 用 到 了 Sign Up Now 按钮 上 ， 然 后 把 它 也 设置 为 主要 图 片 展 示 区 
域 的 背景 颜色 。 见 图 1-14。 



































Marketing text goes here. 






































图 1-14 
随后 ， 我 决定 页 面 中 的 其 他 元 素 将 不 会 再 用 到 海蓝 色 。 


通过 使 用 相同 颜色 将 三 个 元 素 捆绑 到 一 起 ， 用 户 的 视线 将 由 站 点 logo 引 
导 到 充满 趣味 的 相关 内 容 ( 特 色 图 片区 )， 然 后 再 移动 到 Sign Up Now 
按钮 。 
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因此 ， 从 最 初 简单 的 布局 设计 开始 《只 是 把 需要 的 栏目 堆放 到 页 面 上 ， 
而 没有 做 其 他 考虑 )， 我 逐步 地 做 了 一 些小 小 的 变动 ， 创 建 了 一 条 对 角 
线 ， 从 而 支持 了 用 户 由 左上 到 右 下 的 视觉 自然 规律 。 采 用 视觉 移动 的 自 
然 轨迹 意味 着 最 终 的 设计 将 有 助 于 用 户 更 快 地 熟悉 站 点 ， 并 且 指引 用 户 
下 一 步 该 做 什么 ， 这 样 会 让 页 面 更 加 友好 。 换 句 话 说， 设计 让 用 户 对 网 
站 产生 了 美好 的 第 一 印象 。 


对 角 线 平衡 法 则 并 不 一 定 适用 于 每 个 页 面 设计 ， 因 此 不 必 强 制 遵守 。 但 
是 如 果 发 现 使 用 对 角 线 平衡 可 能 有 助 于 强调 整个 页 面 意图 ， 不 妨 考 虑 一 
试 。 另 外 ， 当 你 在 开始 某 个 设计 的 时 候 ， 时 刻 想 着 对 角 线 平衡 法 则 ， 很 
多 情况 下 它 都 会 发 挥 效用 。 

常见 的 页 面 布 局 案例 ， 可 以 参考 Yahool Design Pattern Library" 的 Page 
Grids 栏目 。 那 里 还 提供 一 些 页 面 模板 ， 在 你 开始 设计 时 可 能 会 用 到 ( 记 
住 ， 关 于 本 书 里 引用 的 所 有 链接 ， 你 都 能 在 www.rhjr.net/dtm 找到 )。 

















GD Yahoo! Design Pattern Library 的 网 址 为 http://developer.yahoo.com/ypatterns/。 





译 者 注 
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Or ee 过 去 是 这 样 ， 将 来 一 直 也 是 这 样 。 事 实 上 ， 
约 想 着 有 一 天 能 够 说 服 自 己 最 终 创 造 出 一 


儿 年 来 ， 我 为 自己 的 个 人 





的 都 只 是 在 x 








每 
最 近 侦 然 


可 TANS 











个 简单 到 什 和 


网 站 进行 了 多 次 改版 设计 。 而 每 一 



































ove + rage 


前 的 基础 上 
每 一 次 改版 完成 时 我 都 认为 不 可 能 
翻 出 了 之 前 某 版 本 的 备份 ， 让 我 追 
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或 多 或 少 地 简化 、 再 简化 一 些 。 





























我 曾经 


么 也 没有 的 页 面 。 


次 改版 所 做 
想起 来 ， 在 












































忆 恨 久 ， 见 图 2-1。 





Imind+soul | online | widgets | writings | me | them | contact | 





+) news 


Flash Out of the Box | O'Reilly | My book on Flash basics has 
been released! 区 is a very reader-centric, task-oriented 
approach to learning Flash and great for newbies and 
programmers alike. 


WidgetMaker.net | Check out my brand new Flash blog and 
widget-resource site, complete with free source files, 


KnowledgeNet (part of Thomson NETg) | I recently joined the 
Engineering department of the e-Learning industry leader as a 
Flash developer. 





| InformIT | Check out the latest 
Installment in my series on Flash techniques you can learn In 10 
minutes or less. 


PD books 


| New Riders | I wrote chapters 1 and 2 
for the latest in the popular Magic series, about modular site 
architecture and creating custom presentations, I also served as 
tech editor for two other chapters. 


| Lynda.com | I was a 
contributing author for three chapters, and did technical review 
for the book. 


图 2-1 
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简洁 了 ， 可 随后 又 推翻 了 这 


结论 。 
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我 的 意思 是 说 ， 在 这 几 年 逐步 深入 学 习 网 页 设计 和 交互 设计 之 后 ， 我 提 
升 了 欣 芝 的 品味 ， 磨 练 了 设计 的 技巧 。 而 这 些 都 迫使 我 去 设计 一 个 新 的 
网 站 版 本 ， 使 之 能 更 好 地 展现 我 的 个 性 。 很 多 人 都 对 这 个 网 站 表示 赞 
许 ， 但 其 实在 一 开始 我 特别 惊讶 。 因 为 当时 我 并 不 认为 它 有 什么 特别 之 
处 一 一 它 是 如 此 简单 ， 如 此 基本 ， 如 此 乏味 。 


当时 我 觉得 ， 这 个 基本 得 几乎 不 可 思议 的 布局 根本 就 不 值得 大 书 特 书 。 
图 片 没 几 张 ， 所 以 也 没什么 可 欣赏 的 ;然而 文字 却 不 少 ， 所 以 你 必须 读 
很 多 。 总 之 ， 在 那个 时 候 我 觉得 网 站 里 到 处 都 是 缺点 。 


但 结果 证 明 它 们 不 是 缺点 。 事 实 上 这 个 设计 正好 传达 了 我 所 希望 传达 的 
内 容 一 一 我 是 一 个 极 简 主 义 者 ， 喜 欢 用 最 简洁 的 方式 与 人 们 沟通 〈 有 点 
讽刺 意味 ， 不 是 吗 ? )。 这 种 特别 的 设计 风格 其 实 展现 了 我 的 个 性 。 


所 有 的 网 站 都 在 展现 某 种 个 性 ， 但 这 并 不 一 定 都 是 有 意 为 之 。 很 多 时 
候 个 性 都 是 在 无 意 间 流 露出 来 的 。 这 种 时 候 ， 公 司 不 知 不 觉 间 可 能 就 
会 把 内 部 问题 暴露 在 网 站 这 样 一 个 和 客户 发 生 接 触 的 第 一 平台 。 比 如 
说 ， 如 果 公司 士气 低落 ， 网 站 的 设计 可 能 会 表现 得 乏味 而 毫 无 生气 ;而 
如 果 雇 员 激 情 满 怀 兴高采烈 ， 该 公司 的 网 站 则 很 可 能 丰富 多 彩 ， 活 跃 而 
富有 魅力 。 


我 一 直 进行 网 站 改版 其 实 也 是 一 种 个 性 的 展现 。 每 个 网 站 都 可 以 这 样 做 
来 展现 自己 的 品牌 形象 ， 或 者 说 传达 一 个 公司 希望 和 外 界 交 流 的 讯 县 


设计 时 我 并 没有 真正 意识 到 我 正在 干什么 ， 我 只 是 在 不 停 地 摸索 直到 确 
定 某 个 想法 。 但 是 这 种 极端 简洁 的 设计 最 终 使 我 发 现 ， 运 用 一 些 巧 妙 的 
元 素 把 所 有 设计 捏合 成 一 个 整体 将 有 助 于 展现 个 性 ， 不 管 团体 或 个 人 都 
是 如 此 。 而 且 很 容易 做 到 这 一 点 : 我 们 只 需要 强调 那些 已 经 有 的 东西 ， 
从 而 形成 一 种 有 凝聚 力 的 “品牌 ”。 





















































































































































































































































[Gi 





























mh 





























图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 


2.1 统一 设计 风格 ,形成 积极 的 印象 ”19 


C2.1 统一 设计 风格 ， 形 成 积极 的 印象 


几 年 前 刚 开 始 设计 时 ， 我 知道 页 面 应 该 采取 一 个 单列 的 布局 。 因 为 我 要 
放 在 网 页 中 的 文本 只 有 一 列 ， 同 时 站 点 导航 部 分 也 只 需要 一 行 。 因 此 我 
创建 了 一 个 简单 的 居中 列 ， 它 的 宽度 足以 在 低 分 辨 紊 的 显示 器 上 显示 ， 
而 且 左 右 两 边 还 能 留 下 很 不 错 的 边 距 。 如 图 2-2 所 示 。 
























































| mind+soy| | online | widgets | writings | me | them | contact | 





Motion graphic 


Heading 


| dolor sit amet, consectetuer adipiscing elit. 
Maecenas mi est. viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Heading 


Lorem Insum dolor sit amet | Consectetuer adipiscing elit. 
Maecenas mi est viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Heading 


Lorem Insum dolor | Sitamet, consectetuer adipiscing elit 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | IDk 








图 2-2 

首页 项 行 供 站 点 导航 使 用 ， 而 它 下 方 的 空间 则 预 留 放置 动画 图 片 〈 那 个 
时 候 ， 我 做 过 很 多 动画 设计 )。 

由 于 在 文本 列 的 两 侧 都 留 下 了 很 宽 的 边 距 ， 我 决定 在 左边 区 域 放 置 站 点 


标志 。 标 志 是 一 个 非常 简单 的 logo， 包 含 了 两 个 单词 Love 〈 爱 ) 和 Rage 
( 怒 )， 由 一 个 加 号 〈+) 隔 开 。 这 是 当时 我 从 巴 效 . 鲁 霍 曼 执 导 的 莎 士 比 
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亚 名 剧 Romeo + Julierz 电 影 海 报 中 获得 的 灵感 。 是 的 ， 我 知道 从 一 部 视 


觉 如 此 丰富 的 电影 中 获得 灵感 非常 容易 。 但 是 朋友 们 ， 


我 就 已 经 很 快活 了 。 


在 这 个 logo 下 面 有 一 个 小 小 的 、 手 绘 的 心 形 图 标 ， 从 而 构成 了 整个 标志 。 
顺便 说 一 句 ,“ 爱 与 怒 ” 这 个 点 子 源 自 于 我 多 年 前 写 的 一 首 歌 (显然 ， 它 





也 是 一 部 电影 的 名 字 ? )。 再 
我 自己 写 的 歌词 。 此 后 我 在 网 上 再 没有 使 用 过 这 个 短语 。 


我 把 这 个 图 形 放 到 结构 框图 里 ， 把 它 与 动画 图 片 顶部 对 齐 。 见 图 2-3。 





这 是 个 好 的 ] 
什么 东西 能 够 在 整个 站 点 

















只 要 能 有 点 灵感 











lovet+rage 
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次 ， 我 因为 灵感 而 兴奋 ， 即 使 那 是 出 自 于 
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Heading 

| dolor sit amet. consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 


magna, in adipiscing enim est non nisi, Sed neque. Nulla ante. 


Aliquam gravida risus quis neque. Donec at nunc- 


Heading 


Lorem Ipsum dolor sit amef | Consectetuer adipiscing elit. 
Maecenas mi est viverra eu, sagittis sed, ultrices 69et felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 


magna, in adipiscing enim est non nisi Sed neque. Nulla ante. 


Aliquam gravida risus quis negue. Donec at nunc- 


Heading 

Lorem | | Sitamet, consectetuer adipiscing elit 
Maecenas mi est viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 


magna, in adipiscing enim est non nisi. Sed neque_ Nulla ante. 


Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | Ink 





图 2-3 


开始 ， 但 它 还 不 足以 把 所 有 设计 捏合 成 一 个 整体 。 我 希望 有 
直 延 续 下 去 ， 并 且 整 合 每 个 页 面 ， 为 网 站 
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创造 出 一 个 有 凝聚 力 的 形象 。 我 所 想 要 的 应 该 是 一 个 符号 。 























GD Romeo+Juliet 引进 版 名 为 “现代 罗密欧 与 朱丽叶 ”， 美国 福克斯 影 业 公司 1996 年 出 











品 。 在 : 








@ Love and Rage 是 一 部 德国 


有 影 标题 中 ,，“ 罗 密 欧 ”和 “朱丽叶 ”之 间 有 一 个 “+” 的 
小 小 的 “&”。 相 关 网 址 为 http://www.romeoandjuliet.com/。 一 一 译 者 注 
与 爱尔兰 合拍 的 影片 ，Nova Films 于 1998 年 出 品 。 








符号 ， 里 面 有 一 个 








一 一 译 者 注 
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使 用 符号 


我 第 一 次 了 解 符 号 语言 是 在 看 电影 的 时 候 。 不 ， 不 是 那些 角色 *， 而 是 角 
色 之 外 的 东西 。 它 们 就 如 同 贯穿 影片 的 隐喻 和 象征 一 般 用 于 表现 某 个 主题 。 


例如 ， 在 影片 In the Curf2 (Pathe Productions 于 2003 年 出 品 ) 中 从 始 至 
终 都 是 黯淡 的 色调 ， 但 偶尔 会 插 和 一抹 深 红 来 勾勒 出 主角 Frannie 〈 由 
Meg Ryan 饰演 ) 的 线索 。 影 片 的 标题 、 故 事情 节 和 结尾 的 那 一 幕 都 无 可 
避免 地 与 红色 联系 到 一 起 。 本 质 上 颜色 成 为 了 影片 的 一 种 符号 语言 ， 或 
者 说 是 另 一 个 角色 。 


同时 ， 我 从 自己 的 偶像 设计 师 Hillman Curtis 身上 学 到 了 更 多 关于 符号 的 
使 用 方法 。 


当 Hillman 和 他 的 团队 为 影片 Bend It Like Beckham“ (Gurinder Chadha 于 
2002 年 执导 ) 设计 官方 网 站 时 ， 把 网 站 的 焦点 集中 在 一 个 足球 上 ， 让 它 
带领 着 用 户 从 网 站 的 一 个 栏目 移动 到 另 一 个 栏目 。 这 个 足球 符号 整合 了 
所 有 的 设计 元 素 ， 同 时 延续 了 影片 中 那 种 乐观 向 上 的 情绪 。 见 图 2-4。 











NOW AVAILABLE ON DVD 








图 2-4 





中 此 处 “符号 ”的 原文 为 “character”。 英 文中 “character” 含 义 丰 富 ， 除 了 “符号 ” 
之 外 还 有 “角色 ”“ 字 符 ””“ 性 格 ” 等 多 种 字义 。 译 者 注 

@ In the Cut 中 文 译名 为 “裸体 切割 ”或 “ 凡 I 线 第 六 感 "。 相 关 网 址 为 http://www.apple. 
com/ trailers/sony_pictures/ in_the_cut/。 译 者 注 

@ Bend It Like Beckham 中 文 译名 为 “我 爱 贝克 汉 姆 ”。Kintop Pictures 于 2002 年 出 品 。 
网 址 为 http://www.foxsearchlight.com/benditlikebeckham/。 译 者 注 
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然而 ， 并 不 是 所 有 符号 都 能 像 摄 影 师 运 
在 大 多 数 情 况 下 ， 


趋势 来 


在 这 个 


- 立 - 


早 





项 目 





放 在 页 


老实 说 ， 这 样 看 上 去 相 

















凸显 个 性 


也 们 
果 持 一 致 的 主题 风格 。 














视觉 叙述 那样 动感 和 多 姿 多 彩 。 
只 需要 简单 地 在 网 站 中 重复 出 现 ， 以 某 种 延续 的 





、 





























中 ， 我 有 
掉 每 个 标题 的 前 1 


boy 











个 加 号 图 案 和 一 颗 心 。 我 最 先 尝试 的 是 心 ， 把 它 
用 ， 就 像 段 落 的 着 重 写 一 样 。 见 图 2-5。 
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Heading 


| dolor sit amet consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Heading 


Lorem ljRsum dolor sit amoet | Consectetuer adipiscing elit. 
Maecenas mi est, viverra ey, Sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Heading 

| Sitamet, consectetuer adipiscing eliL 
Maecenas mi est viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi Sed neque_ Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | lok 








图 2-5 



































当 愚 奏 。 自 从 初中 不 再 帮 人 给 女生 递 纸 条 后 ， 我 











就 没 见 过 在 哪个 地 方 有 这 么 多 心 的 。 这 可 不 是 我 想 在 网 上 用 来 表现 自己 
的 那个 图 形 。 于 是 我 抹 去 了 这 些 心 ， 试 着 用 经 过 加 工 的 加 号 图 案 来 奉 换 


它们 。 


见 图 





2-0。 
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加 号 图 案 有 两 层 含 义 。 它 不 仅仅 是 网 站 logo 元 素 在 整个 站 点 中 的 延续 ， 
还 创造 出 一 种 效果 ， 即 页 面 中 的 每 个 文本 段落 都 吸附 到 各 标题 的 下 面 。 
与 此 同时 ， 它 还 暗示 这 些 内 容 是 新 的 ， 仿 佛 那个 “+” 意 味 着 “ 刚 加 上 ” 
一 样 。 

很 好 ， 这 个 小 成 果 让 我 感到 非常 季 运 。 运 气 绝对 是 设计 的 一 部 分 。 在 设 
计 logo 时 我 根本 没 打算 重复 使 用 这 个 元 素 ， 但 当 它 出 现在 合适 的 位 置 时 
我 发 现 效 果 很 棒 ， 何 乐 而 不 为 ? 
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由 Heading 

| dolor sit amet consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc- 





中 Heading 

| Consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


(+ Heading 

Lorem lpsum dolor | Sit amet, consectetuer adipiscing elit 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | link 








图 2-6 


同时 我 还 注意 到 页 面 中 最 突出 的 logo 和 标题 文字 ， 它 们 之 间 有 点 不 太 相 
配 。 这 个 矛盾 让 我 意识 到 还 得 再 深入 一 步 。 见 图 2-7。 
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+ Heading 

Lorem lpsum | dolor sit amet, consectetuer adipiscing elit. 
Maecenas mi est viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc_ 


+ Heading 





| Consectetuer adipiscing elit. 
Maecenas mi est, viverra ey, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egesias. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc_ 


由 Heading 

1Sitamet, consectetuer adipiscing elit 
Maecenas mi est viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | lick | lick 








图 2-7 


我 需要 在 标题 中 使 用 和 logo 一 样 的 特殊 字体 。 于 是 我 删除 了 各 标题 的 
HTML 文本 ， 而 把 文字 做 成 图 片 显 示 。 在 那个 时 候 我 并 不 太 了 解 易 用 性 
和 搜索 引擎 优化 技术 ， 也 没有 意识 到 所 用 的 都 是 可 恶 的 表格 ”"。 匹 配 字体 
并 不 算 错 但 是 把 文字 转化 为 图 片 意味 着 搜索 引 过 味 无 法 对 标题 和 

行 分 析 ， 而 且 这 些 图 片 对 屏幕 阅读 器 《帮助 那些 视力 不 佳 的 用 户 浏览 网 
页 的 设备， ?来 说 也 毫 无 意义 


当时 我 的 确 很 天 真 ， 就 这 么 艰难 地 行进 下 去 。 我 编写 了 页 面 模板 ， 创 建 
了 动画 图 片 ， 然 后 为 站 点 构建 了 所 有 其 他 的 页 面 。 





















































@ 当今 流行 的 XHTML+CSS 技术 要 求 Web 设计 师 使 用 规范 的 HTML 代码 。W3C 组 
织 建议 HTML 代码 应 当 只 起 到 单纯 的 语义 作用 ， 这 表示 页 面 布局 应 通过 CSS 来 实 
现 。 严 格 意义 上 来 说 ， 表 格 只 能 用 于 表现 表格 数据 ， 而 不 能 被 用 来 规划 页 面 的 布 
结构 。 这 对 广大 习惯 于 使 用 表格 布局 的 设计 师 来 说 是 一 个 很 大 的 冲击 ， 但 亦 是 潮 光 
趋势 的 必然 。 一 一 译 者 注 

@ 屏幕 阅读 器 的 原理 是 “朗读 ”出 页 面 中 的 文本 文字 。 很 明显 它们 无 法 朗读 出 图 片 的 

内 容 ， 但 可 以 读 出 图 片 的 ALT 字符 串 。CHTML 中 为 IMG 标记 添加 的 文本 字符 串 ， 

] 于 对 网 页 中 的 图 片 进行 描述 。 它 允许 使 用 纯 文 本 浏览 器 或 选择 不 下 载 图 像 的 用 户 

了 解 图 像 的 说 明 。) 一 一 译 者 注 
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2.1 


统一 设计 风格 ,形成 积极 的 印象 











为 了 延续 加 号 图 标 这 一 符号 ， 我 把 它 用 在 每 一 


个 页 面 的 每 一 个 标题 
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页 上 。 此 


外 ， 与 站 点 名 爱 与 级 (love and rage) 相符 ， 另 外 一 个 栏目 的 主题 mind 


and soul 中 也 有 一 





mind+soul 
CC 人 


个 and， 我 把 这 个 图 








Se oni TH ove pages, 
study everything that had just suddenly entered my head, and 
then go back to read five more pages. 


























ind+soul | online | widgets | writings | me | them | contact | 


1 This ha 
en my favorite for a long time. Irs a philosophical discourse 
that follows the story of a man in search of his former self, and 
it will en ge your life, You can read it online, but I highly 
picking up a pape， 
Dy portorn Religion section) of your fav em 
ith you on a long vacati a year and 


perback copy in the Philosophy 


,go to the | bry, 


1Imay be a 风光 biased - I 


Dharma Bums (Jack Kerouac) 

first read this book while travelling around the country, ending 

up in San Francisco at the same time the author did in the story 
Ee book 2 Le you on a ride youl never forget. 


rhythm that will tap into the best parts of 


| An oracle book 
i 


T 
for the ages, Timeless, beautiful, elegant, and powerful, The link 
here goes to an online version of it, but I highly recommend 

picking up the real thing at a bookstore. Cal 
Be affected by it. It will change your perspective on virtually 


It around. Read it. 


Inspiration 


Bruce Mau's Incomplete Manifesto for Growth | 
全 r designers - hard and true，Read it, think about it learn from 


Hillman Curtis | Check out the Adobe System 
re sid It's a great demonstration of "making he el ble 








图 2-8 


标 也 用 在 了 那里 。 见 图 2-8 的 左 侧 。 


就 是 这 样 了 。 这 个 简单 、 基 础 、 乏 味 的 网 站 ， 满 是 缺陷 和 失误 。 但 它 仍 
是 我 的 最 爱 ， 胜 过 任何 其 他 我 为 自己 设计 的 站 点 。 





这 段 时 间 以 来 ， 我 一 直 希 望 重新 设计 自己 的 网 站 ， 
计 一 样 展现 我 的 个 性 。 而 下 一 





证 新 的 版 本 成 为 我 的 最 爱 。 





就 像 我 所 说 的 ， 不 管 是 有 心 还 是 无 意 ， 
， 并 相应 做 出 简单 的 改动 ， 我 们 便 能 够 往 自 己 想 要 
的 任何 方向 修 塑 我 们 网 上 的 形象 。 一 般 来 说 ， 大 部 分 人 都 不 愿 自己 看 
望 传达 给 用 户 一 种 特别 的 氛围 。 品 
能 够 以 一 种 文雅 而 易于 理解 的 方式 来 
E 希 望 他 们 看 到 的 东西 。 





意 网 站 正在 传达 什么 

















去 单调 乏味 、 军 无 生 

















气 ， 每 个 人 都 硕 
牌 标志 以 及 源 目 品牌 标志 的 符号 ， 
传达 信息 ， 并 且 向 用 户 展现 我 们 真 J 









































也 就 是 说 ， 





























标 和 符号 
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次 设计 ， 我 希望 自己 能 





让 你 的 品牌 标志 保持 精致 和 优雅 。 








慎重 、 





能 够 像 这 个 最 初 的 设 
更 周到 ， 


网 站 都 会 展现 某 种 个 性 。 时 刻 注 


















































你 不 能 
i 要 有 良好 的 判断 力 来 调整 
它们 简单 朴素 一 
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随便 扔 出 个 足球 然 
品牌 商 





在 你 第 一 次 使 用 某 个 Web 应 用 产品 时 ， 熟 悉 它 的 关键 在 于 是 否 能 理解 整 
个 站 点 的 内 部 结构 。 而 最 初 的 几 个 瞬间 对 于 是 否 能 形成 美好 的 第 一 印象 











令 人 迷惑 的 术语 和 拙劣 的 结构 组 织 ， 将 会 在 儿 秒 钟 内 把 我 们 从 满怀 希望 
和 兴致 勃勃 带 往 灰 心 、 失 败 和 挫折 。 所 以 能 很 快 在 网 站 中 找到 方向 的 重 
要 性 是 筋 良 置疑 的 。 


人 们 通常 获得 导向 的 方法 是 : 粗略 扫 视 一 遍 页 面 ， 看 看 自己 有 哪些 选 
择 ,， 并 且 快 速 过 滤 挥 那些 无 关 自 己 兴 趣 的 内 容 。 例 如 ， 在 某 个 企业 网 
站 寻找 该 公司 的 信息 时 ， 我 们 会 寻找 诸如 About( 关 于)、Company 
(公司 )、Us 我们) 以 及 类 似 的 超 链接 。 如 果 看 到 那些 不 符合 自己 需 
要 的 链接 ， 我 们 会 直接 忽略 它们 。 而 当 某 个 符合 需要 的 链接 出 现时 ， 
我 们 会 更 为 仔细 地 查看 与 其 毗邻 的 文字 ， 以 图 确定 其 是 否 正 是 我 们 需 
要 的 选项 。 如 果 是 ， 我 们 就 单 击 。 


换 句 话说 ， 我 们 先 浏 览 页 面 的 各 主要 区 域 ， 找 出 相关 的 部 分 ， 然 后 在 这 
些 部 分 里 的 项 目 中 找 出 关联 性 更 强 的 ， 并 且 希 望 最 终 能 发 现 那 些 我 们 确 
实 一 直 在 寻找 的 内 容 (或 者 ， 如 果 浏 览 没有 什么 特定 目的 ， 我 们 可 能 会 
发 现 更 有 趣 的 内 容 )。 


这 种 推理 的 过 程 不 仅 能 帮助 我 们 首次 浏览 时 找到 方向 ， 而 且 还 能 在 我 们 
使 用 过 网 站 一 段 时 间 后 ， 帮 助 我 们 进一步 寻找 某 些 信息 ， 或 者 完成 某 些 
任务 。 出 于 这 种 原因 ， 导 航 过 程 本 身 是 否 合理 变 得 至 关 重 要 。 它 的 意义 
不 在 于 是 否 能 反映 了 网 站 内 部 的 结构 ， 而 是 在 于 对 我 们 用 户 是 否 合 情 合 
理 。 网 站 必须 符合 我 们 思考 问题 的 方式 。 


我 曾经 参与 过 一 个 项 目 ， 需 要 重新 设计 一 个 面向 网 站 建设 者 的 “所 见 即 
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所 得 "” 式 的 Web 应 用 。 这 个 程序 有 些 类 似 Google Page Creator”， 它 让 
用 户 仅 需 操作 可 视 化 的 编辑 工具 就 能 创建 和 编辑 网 页 ， 而 无 需 手 写 代码 。 


然而 ， 与 Page Creator 不 同 ， 这 个 产品 已 经 存在 了 很 长 一 段 时 间 ， 经 历 过 
好 几 次 大 的 改动 。 站 点 的 功能 越 来 越 多 ， 站 点 的 导航 也 变 得 越 来 越 繁 见 。 
网 站 建设 者 只 是 随意 地 将 新 的 界面 元 素 添 加 到 网 页 中 ， 结 果 用 户 越 来 越 
难 完成 任务 。 


对 于 一 个 用 户 达 好 几 万 人 的 Web 应 用 程序 来 说 ， 这 种 状态 可 不 乐观 。 


开发 团队 和 我 在 一 起 工作 了 好 几 周 ， 对 该 产品 做 了 一 次 全 面 检修 。 导 航 
功能 只 是 其 中 的 一 小 部 分 ， 但 却 又 是 非常 重要 的 一 部 分 。 


C3.1 告诉 软件 该 做 什么 


在 我 准备 着 手 设计 整个 产品 的 导航 《或 者 称 之 为 持久 导航 ) 时 ， 它 看 起 
来 其 实 相 当 简 单 : 只 包含 两 个 按钮 标签 ， 分 别 是 Home〈 首 页 ) 和 Site 
(站 点 )。 然 而 展开 Site 标签 后 ， 却 出 现 了 一 大 堆 应 用 功能 选项 ， 而 且 羔 
单项 之 间 宇 无 顺序 。 见 图 3-1。 


真正 的 下 拉 荣 单 要 比 这 里 显示 的 长 很 多 ， 但 这 已 经 足够 让 你 发 现 问题 了 。 
每 一 个 菜单 项 都 为 了 一 个 完全 不 同 的 目的 而 通 往 一 项 完全 不 同 的 任务 。 
例如 ，Create new page《〈 创 建新 页 面 ) 和 Edit contact information 〈 编 辑 联 
系 信 息 ) 选项 ， 很 明显 相互 之 间 训 无 关系 。 没 有 一 个 用 户 会 这 么 想 : 我 
要 编辑 联系 信息 ， 所 以 应 该 到 Site 羔 单 里 面 找 。 但 事实 上 这 两 个 选项 大 
然 就 像 两 只 走 丢 的 小 狗 一 样 紧 紧 靠 在 一 起 。 


这 些 不 同类 型 的 动作 应 该 以 更 自然 的 形式 进行 分 组 。 从 这 个 菜单 往 下 看 ， 
我 发 现 了 一 些 彼此 相关 的 名 词 。 诸 如 Web page (网 页 )、New page (新 页 
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QD “所 见 即 所 得 ”的 英文 缩写 为 WYSIWYG (What You See Is What You Get， 通 常 发 音 
为 “wizzywig”)。 它 是 一 种 计算 机 方面 的 技术 ,使 用 户 在 编辑 视图 中 所 看 到 的 文档 
与 该 文档 的 最 终 产 品 具 有 相同 的 样式 ， 也 允许 用 户 在 视图 中 直接 编辑 文本 、 图 形 或 
文档 中 的 其 他 元 素 ， 故 也 称 “ 可 视 化 操作 ”。 例如 Dreamweaver 等 软件 。 一 一 译 者 注 

@) Google Page Creator 是 Google 公司 于 2006 年 2 月 推出 测试 的 在 线 网 页 创建 工具 。 
人 们 可 以 在 其 免费 提供 的 100MB 空间 中 自由 创建 网 页 并 托管 。 该 产品 提供 多 种 网 
页 模板 ， 用 户 可 以 直接 输入 内 容 、 上 传 图 片 并 发 布 这 些 网 页 ， 无 需 懂 得 HTML。 网 
址 为 http://pages.google.com/。 一 一 译 者 注 
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相 ) 和 Navigation 〈 导 航 栏 ) 等 都 是 可 以 创建 和 编辑 的 站 点 组 成 部 分 ， 而 
Templates and colors 〈 模 板 和 颜色 ) 以 及 Fonts〈 字 体 ) 则 与 网 站 的 外 观 
有 关联 。 




























settings Help 





Design web page 
Edit navigation 
Create new page 
Create/edit forum 

Create "Coming Soon" page 
Edit templates & colors 
Customize fonts 

Drganize site 

Manage files 

Edit contact information 

My account 





图 3-1 
于 是 我 把 这 些 荣 单 选项 分 成 了 几 个 部 分 ， 使 之 更 好 地 反映 了 它们 彼此 间 














的 自然 联系 ， 然 后 对 它们 分 类 标识 。 新 的 栏目 标签 如 图 3-2 所 示 。 


sm mas snes i om | Sines Hap | 


图 3-2 


这 些 新 的 分 类 标签 把 一 开始 的 选项 列表 划分 成 好 几 个 组 ， 分 别 包 含 了 站 
点 各 元 素 、 扩 展 功 能 (例如 论坛 )， 以 及 网 站 样式 。 然 后， 重新 检查 ， 看 
看 每 个 菜单 在 新 的 标签 下 表现 如 何 。 在 做 这 些 的 时 候 ， 我 还 去 掉 了 每 个 

菜单 项 前 面 的 动词 ， 比 如 Edit (编辑 )、Manage (管理 )， 等 等 ， 只 留 下 
了 简单 的 词组 ， 这 样 它们 可 以 更 容易 地 被 用 户 扫 描 到 。 用 户 只 需要 浏览 
图 3-3 中 的 列表 ， 就 可 以 很 轻易 地 找 出 Web page、Navigation， 或 者 任何 
其 他 选项 。 


分 组 看 上 去 变 得 更 有 意义 了 。 然 而 ， 就 像 你 所 看 到 的 ， 我 同时 也 创建 了 
一 个 怪 里 怪 气 的 “废料 箱 ” 菜 单 ， 我 称 之 为 Misc. (杂项 ) ”。 














人 Misc. 为 Miscellaneous 的 缩写 。 一 一 译 者 注 





图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 


3.1 告诉 软件 该 做 什么 29 







mii i SR ii EZmaEZRA 


Web page 
Navigation 


Coming Soon page 





Eien i i i | 


Templates & colors 






Fonts 


A 


Site organization 
Files 
Contact information 
Account 









图 3-3 
每 个 应 用 程序 都 需要 一 个 废料 箱 ， 对 吧 ”? 

















是 的 ， 我 也 不 喜欢 它 。 在 头 5 秒 钟 内 它 还 貌似 有 点 意义 ， 但 随即 我 就 意 
识 到 这 玩意 很 令 人 厌恶 。 首 先 ， 我 很 想 找 一 个 更 好 的 名 词 去 表现 Misc. 里 
有 的 项 目 ， 而 随后 我 发 现 是 否 有 好 名 词 这 一 点 根本 不 是 问题 所 在 。 
3.1.1 每 个 人 都 想 当 指 挥 

软件 并 不 是 为 了 我 们 能 单 击 那 些 按 钮 而 存在 。 它 是 为 了 我 们 能 完成 任务 
而 存在 。 这 样 我 们 才能 做 事情 。 
所 以 导航 栏 不 应 该 是 陈列 在 一 排 按 钮 上 的 一 串 名 词 ， 而 应 该 帮助 我 们 感 
觉 自 己 正 在 做 一 些 事 情 ， 让 我 们 找到 当 司 机 的 感觉 。 

我 们 人 类 不 喜欢 感觉 到 自己 正 按 软 件 的 要 求 去 做 事情 。 在 决定 采取 某 个 
行为 的 瞬间 ， 我 们 希望 由 自己 控制 软件 ， 由 自己 告诉 它 应 该 做 些 什 么 ， 
而 不 是 相反 。 任 何 违 反 这 一 意愿 的 软件 都 会 让 人 感到 愚蠢 而 糟糕 ， 结 果 
会 敬而远之 。 
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看 看 你 的 身边 ， 你 会 发 现 很 多 软件 的 导航 都 设计 成 让 用 户 感觉 自己 才 是 
主人 。 从 微软 的 Word 到 Adobe 的 Illustrator， 它 们 的 菜单 所 包含 的 选项 
都 是 为 了 用 户 去 做 某 件 事情 ， 例 如 Edit (编辑 ) 和 View (查看 )。 


这 些 菜单 不 是 基于 对 象 而 是 基于 任务 的 。 这 才 是 它们 应 该 有 的 样子 。 

我 关注 并 重组 了 菜单 中 的 对 象 ， 但 其 实 我 应 该 关注 这 个 程序 中 所 需要 完 
成 的 任务 类 型 。 为 了 做 到 这 一 点 ， 那 些 术语 应 当 显 示 为 动 宾 词 组 ， 而 不 
仅仅 只 是 又 丑 又 过 时 的 名 词 。 

也 许 你 已 经 明了 ， 所 谓 动 宾 词组 就 是 动词 - 名词 的 简单 组 合 ， 以 动词 开 
头 并 以 名 词 结尾 。 通 过 这 种 形式 构成 的 词语 ， 我 们 就 能 告诉 软件 我 们 和 希 
望 做 哪 种 动作 ， 以 及 这 个 动作 所 针对 的 对 象 是 什么 。 这 让 我 们 感觉 自己 
正在 指挥 软件 : 我 们 是 领导 者 ， 而 不 是 被 领导 者 。 

如 果 没 有 动词 ， 菜 单 就 很 思春 而 糟糕 。 
为 了 补救 这 一 问题 ， 我 把 由 名 词 主 导 的 按钮 标签 改 成 了 由 动词 主导 的 标 
签 。 见 图 3-4。 
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Web page 
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Coming Soon page 
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图 3-4 


图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 


3.1 告诉 软件 该 做 什么 31 


不 再 是 为 了 任务 而 去 选择 Styles 〈 样 式 ) 一 Fonts (字体)， 你 现在 可 以 告 
诉 软件 你 想 Manage Fonts 〈 管 理 字体 )。 按 钮 标签 是 动词 ， 而 菜单 选项 是 
名 词 。 


现在 用 户 可 以 感觉 到 自己 在 指挥 着 软件 。 现 在 他 们 能 够 去 Design 设 
计 ) 导航 栏 或 者 某 个 存在 的 网 页 、Create〈 创 建 ) 论坛 或 新 页 面 ， 以 及 
Customize (定制 ) 站 点 的 结构 、 文 件 等 。 


顺便 说 一 句 ， 如 果 用 户 希 望 为 网 页 中 的 文本 选择 某 个 字体 ， 我 也 许 会 建 
议 使 用 Styles 一 Fonts。 但 在 这 个 项 目 中 ， 用 户 希 望 的 却 是 管理 各 种 可 用 
字体 ， 以 便于 能 转化 为 图 片 显示 ， 而 不 受 其 他 浏览 者 系统 字体 的 限制 。 


在 把 这 一 块 转交 给 开发 团队 之 前 ， 我 还 需要 再 做 一 件 事 。 
3.1.2 ”避免 Login 综合 症 


每 个 设计 师 或 多 或 少 都 会 有 自己 的 怪兽 。 我 的 怪癖 就 是 十 分 讲究 怎样 使 
忆 Login 以 及 与 之 对 应 的 Logout。 


我 参与 过 许多 应 用 程序 的 开发 ， 它 们 大 多 都 会 用 到 这 些 词 儿 ， 但 其 效果 
总 让 我 怀疑 。 

所 有 策划 、 设 计 和 构建 Web 应 用 程序 的 人 都 想 要 实现 一 些 目标 。 要 实现 
起 来 并 不 轻松 ， 必 须 怀 着 创造 一 款 伟大 的 产品 的 信念 ， 而 且 要 全 心 投 入 
其 中 才 行 。 

开发 者 、 项 目 经 理 还 有 设计 师 们 创建 一 球 产 品 ， 花 费 了 无 数 个 小 时 去 规 
划 、 编 写 代码 、 测 试 可 用 性 ， 还 要 考虑 到 所 有 能 想到 的 事情 。 而 在 这 些 
难以 想象 的 艰苦 工作 之 后 ， 他 们 把 所 有 的 内 容 交 给 一 个 碰 上 谁 就 是 谁 的 
人 来 发 布 。 而 这 个 人 往往 会 输入 一 个 Login， 然 后 就 这 么 扔 在 那里 。 看 看 
图 3-5 吧 。 


其 中 两 张 截图 来 自 非常 知名 的 Web 应 用 产品 。 在 这 些 首 页 上 就 有 一 个 很 
基本 的 语法 错误 ， 而 网 站 的 每 一 个 用 户 都 会 时 不 时 看 到 它 并 且 会 单 击 它 。 
也 许 是 每 周 用 到 一 次 ， 也 许 是 每 天 就 用 到 一 次 。 
在 这 些 截 图 里 面 ， 还 有 互联 网 上 数 不 尽 的 其 他 类 似 例 子 中 ，Login 这 个 词 
的 用 法 是 错误 的 。 
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Blog Learn SignupPee 








Member Login 

Member Name: 

Password: PLEASE LOGIN: 
| 





图 3-5 
Login 不 是 一 个 动作 ， 这 就 好 像 “ 鞋 ”不 是 一 个 动作 一 样 。 它 是 一 个 名 
词 ， 意 思 是 the Login Interface (登录 的 界面 )。 


你 不 会 想 要 用 户 去 Login， 那 样 根 本 毫 无 道理 。 你 想 要 的 是 让 他 们 去 
Log In。 在 产品 界面 中 使 用 Login 一 词 表现 得 很 不 专业 ， 说 明 开 发 者 没有 








尽 到 责任 一 一 在 程序 中 有 一 些 内 容 没有 经 过 仔细 考虑 ， 没 有 确保 所 有 的 
设计 都 是 精心 而 为 的 。 


这 就 像 竖 起 一 块 牌坊 告诉 大 家 :“ 我 们 很 细心 ， 但 不 是 百分之百 。” 


再 加 上 ， 用 户 所 希望 的 并 不 是 去 和 界面 里 的 对 象 进行 交互 ， 而 是 去 做 自 
己 所 要 做 的 事 。 他 们 的 目的 并 不 是 单 击 它 然后 去 看 登录 面板 ， 而 只 是 想 


登录 。 
因此 你 所 需要 的 不 是 一 个 名 词 ， 而 是 一 个 命令 。 
我 的 这 个 项 目 里 面 也 有 Login 这 个 词 ， 见 图 3-6。 




















图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 


3.1 告诉 软件 该 做 什么 33 


Login | My Account 


smn i smi | Mansge | customize v | Si ei 








所 以 我 把 它 变 成 了 一 个 命令 ， 见 图 3-7。 





Sign in | My Account 


Home Design 了 Create 了 ET Customize 了 settings Help 








图 3-7 

也 许 大 多 数 人 从 来 都 不 会 注意 到 这 里 所 显示 的 是 一 个 单词 还 是 两 个 。 但 
即使 没有 人 注意 ， 错 误 的 用 词 仍然 会 导致 产品 给 人 留 下 不 专业 的 印象 。 
差 之 毫 厘 ， 雇 以 千里 。 请 确保 产品 的 每 一 个 细节 都 是 正确 的 ， 以 此 来 告 
诉 用 户 : 

“我 很 细心 ， 百 分 之 百 ， 从 始 至 终 。” 

3.1.3 ”我 来 说 ， 你 来 做 

对 于 用 户 来 说 ， 他 们 对 站 点 保持 兴趣 的 关键 在 于 能 否 获 得 方向 感 、 能 否 
得 到 所 需 的 信息 ， 以 及 能 否 完 成 任务 。 清 晰 的 导航 结构 不 仅 有 助 于 用 户 
了 解 网 站 能 做 些 什么 ， 还 能 知道 如 何 去 做 。 

运用 动 宾 词 组 ， 按 钮 和 链接 就 能 有 效 地 告诉 用 户 能 做 什么 。 同 时 也 使 得 
用 户 感到 自己 是 指挥 者 ， 是 用 户 告 诉 应 用 程序 去 做 什么 ， 而 不 是 反 过 来 。 
创建 产品 导航 时 ， 请 确保 你 是 以 用 户 为 出 发 点 ， 而 不 是 以 系统 为 出 发 点 。 
用 户 不 是 工具 ， 系 统 才 是 。 
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第 4 章 
链接 生来 不 平等 








无 论 你 习惯 于 在 哪个 网 站 浏览 新 闻 ， 比 如 BBC 新 闻 网 ”%、CNN2、 
Yahoo3， 或 者 其 他 什么 网 站 ， 你 都 会 面 对 各 种 各 样 的 链接 。 这 些 链接 会 
按照 时 间 、 相 关 度 、 点 击 率 以 及 其 他 种 种 顺序 排列 。 这 是 件 好 事 ， 因 为 
它 使 得 找寻 信息 相对 来 说 更 为 容易 。 见 图 4-1。 
























































Latest News 
Parents distraught after mine tragedy 
Alleged cocalne trafficker dies in airstrike 
Bush: Fear, fallure won't dictate withdrawal 
Thousands without a/c in triple digit California 
Ticker: Bush in new book: | cry a lot inthis job 
Kayakers under bridge saved as water rises 


;: Police officer kills two pedestrians 
Friend: Owen Wilson doing better 
Hookers drop charges against Gadhafl's nephew 
Boy dies digging sand tunnel 
Nazi tourism leaves 3-mile long hotel 
White House race enters prime time 
Escaped alligator scares neighbor 
"Halloween' scares up record Labor Day 
Chihuahua wins "fastest title in 2 seconds 
CNN Wire: Latest updates on top stories 





图 4-1 




















这 说 明 即 使 是 链接 这 种 最 简单 、 最 基础 的 设计 也 是 能 够 改进 的 。 最 近 ， 
在 创建 一 个 链接 列表 时 ， 我 找到 了 一 个 这 样 做 的 机 会 。 


























网址 为 http://news.bbc.co.uk/。 一 一 译 者 注 
@ 网 址 为 http://www.cnn.com/。 一 一 译 者 注 
@ 网 址 为 http:// www.yahoo.com/。 一 一 译 者 注 





图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 


第 4 章 链接 生来 不 平等 ”35 





在 这 个 例子 中 ， 我 需要 在 一 家 公司 的 内 部 网 首页 上 创建 一 个 标题 列表 ， 
让 该 公司 呼叫 中 心 的 雇员 们 随时 了 解 最 新 事件 。 这 些 标题 的 链接 有 点 类 
似 新 闻 列 表 ， 需 要 按时 间 顺 序 显示 ， 但 一 次 只 需 显 示 5 条 信息 。 


我 从 最 普通 的 设计 开始 ， 创 建 了 一 个 简单 的 链接 列表 ， 如 图 4-2 所 示 。 




































































Most recent headlines 


Title of most recent story {...) 
Title of slightly less recent story (...) 








Title of slightly less recent story (...) 
Title of slightly less recent story (...) 
Title of slightly less recent story (...) 





图 4-2 

下 一 步 考虑 如 何 让 用 户 看 明白 这 些 从 上 到 下 的 标题 链接 是 按照 什么 顺序 
排列 的 。 在 这 个 呼叫 中 心里 ， 最 新 事件 往往 是 最 重要 的 事件 。 

我 可 以 在 劳 边 放 一 些 说 明 性 文字 来 做 到 这 一 点 ， 比 如 “本 列表 按照 从 最 
新 到 最 老 的 顺序 排列 ” 但 是 这 样 需 要 花费 用 户 更 多 的 精力 去 阅读 。 对 于 
Web 应 用 来 说 ， 不 必要 的 阅读 是 人 们 最 不 愿意 去 做 的 事情 。 
所 以 我 采用 了 男 一 种 方案 。 我 把 标题 从 1 一 5 进行 了 标号 ， 觉 得 这 样 差 
不 多 算是 大 功 告 成 了 ， 如 图 4-3 所 示 。 























































































































Most recent headlines 


1. Title of most recent story (...) 

2. Title of slightly less recent story (...) 
3. Title of slightly less recent story (...) 
4. Title of slightly less recent story (...) 
5. Title of slightly less recent story (...) 























图 4-3 
对 列表 项 目 进行 编号 基本 上 能 表现 出 它们 排列 的 顺序 ， 但 是 列表 看 上 去 





























仍然 很 单调 。 这 证 我 相当 头疼 ， 因 为 即使 每 一 个 项 目 都 编 了 号 ， 它 们 彼 
此 之 间 还 是 太 相 像 了 。 
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在 这 个 呼叫 中 心里 ， 最 新 事件 往往 最 为 重要 。 它 通常 意味 着 公司 某 个 环 
节 发 生 了 突 发 性 事件 ， 需 要 尽快 通知 客户 或 消费 者 。 这 些 事件 可 能 是 售 
后 服务 资源 短缺 ， 也 可 能 是 计 费 系统 暂时 性 故障 ， 也 可 能 是 其 他 事情 ， 
它们 都 需要 呼叫 中 心 的 雇员 在 第 一 时 间 内 获得 上 述 信息 。 

而 在 这 样 一 个 单调 的 列表 里 ， 每 一 个 链接 都 和 其 他 链接 如 此 相似 ， 它 怎 
样 才能 凸显 出 那个 No.1 的 重要 性 呢 ? 

















最 近 在 Boxes and Arrows "上 读 到 了 一 篇 名 为 “环境 的 提示 ”的 文章 ， 





作者 是 Ross Howard， 我 从 中 获得 


OC4.1 


Howard 在 文章 
车 进 站 后 播放 自己 独特 的 
族 ) 会 在 乘 车 途 : 
[不 一 定 
1 播放 





(例如 


上 班 
笔记 本 电脑 工作 ， 
而 到 达 每 一 站 都 提前 


了 些许 灵感 。 


让 环境 提示 成 为 引导 的 线索 




















P 提 到 ， 
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-ea 





三 | 






































意 ， 从 而 提早 准 


Howard 把 这 种 音乐 广 





备 





F 车 。 











境 特征 ， 例 如 隧道 、 








助 乘客 在 脑海 里 构建 








播 称 之 为 环境 


每 个 站 人 台 的 外 观 等 。 























Se 





有 帮助 的 
提示 这 一 概念 应 


我 舍弃 了 列表 
字体 大 小 。 


必 环 境 作 提示 
成 某 项 任务 时 ， 很 可 



































编号 ， 











表现 列表 





张 月 


日 本 的 城 
乐 旋律 。 
感到 无 聊 ， 他 们 会 看 书 、 
会 去 关注 每 一 站 的 站 牌 或 列车 的 语音 
段 独 有 的 音乐 旋律 


拟 的 乘 车 线路 





:这 个 想法 引起 了 我 的 兴趣 
一 种 无 意识 
事情 莫 过 于 让 用 户 很 容易 地 找到 正确 信 
用 到 链接 列 


台 已 日. 
用 十 























际 铁路 线 上 ， 每 一 
因为 那些 经 常 乘坐 同一 线 
读 报纸 ， 








个 站 台 都 会 在 列 


路 的 乘客 
或 者 打开 

















入 
， 此 


了 效 地 引起 














的 提示 。 列 车 线路 中 还 包括 
[这 些 音乐 旋律 和 它 
， 从 而 避免 坐 过 站 。 

















名 

















播报 。 
乘客 的 注 











其 他 的 环 
们 一 起 帮 




















因为 它 表示 当 用 户 在 
在 这 个 企业 内 部 


息 。 于 是 我 党 


VCO 





的 举动 。 














同时 根据 文 草 发 布 的 时 间 顺 序 改变 了 每 一 








最 狐 发 布 的 链接 字体 最 大 ， 下 寿 
FP 的 文章 越 来 越 陈旧 ， 





其 重 


E 要 程度 也 越 来 越 低 。 见 





~ 





(GD Boxes and Arrows 是 一 个 网 站 ， 关 注 图 形 设计 、 交 互 设 计 及 信 
创新 和 讨论 。 网 址 为 http://www.boxesandarrows.com/。 一 一 译 者 注 
@ 这 篇 文章 全 名 为 “Ambi 


ient Signifiers: How I Learned to Stop Getting Lost and Love 
于 2006 年 9 月 发 表 。 原 文 见 http://www.boxesandarrows.com/view/ 


Tokyo Rail”, 


ambient_signifi。 








译 者 注 
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网 站 上 完 
网 上 ， 最 
试 把 环境 





个 链接 的 
以 此 


小 ， 


图 4-4。 


息 构 架 的 各 种 实践 、 
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这 样 一 来 ， 事 情 发 生 了 很 大 变化 。 较 大 的 字 从 较 小 的 文字 中 凸显 出 来 ， 
使 得 列表 中 第 一 个 链接 的 重要 性 一 目 了 然 。 男 一 方面 ， 更 大 的 字体 显得 
更 为 沉重 ， 颜 色 也 更 深 ， 这 使 得 它们 的 表现 力 更 为 突出 。 
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Most recent headlines 


Title of most recent story (...) 
Title of slightly less recent story (...) 
Title of slightly less recent story (...) 








Title of slightly less recent story {,,.} 
Title of slightly less recent story {,,.) 








图 4-4 


展现 岁月 的 印记 


设计 的 时 候 ， 我 突然 想起 设计 师 Brendan Dawes 曾经 在 他 的 Analog In， 
Digital Out -一 书 中 谈 到 过 岁月 感 的 问题 。Dawes 多 愁 善 感 地 回忆 起 在 他 
刚 接触 电脑 时 曾经 读 过 的 一 本 小 册子 ， 那 上 面 不 小 心 留 下 了 一 些 喝 茶 时 
溅 落 的 污 迹 。 他 以 此 谈 到 在 数字 领域 中 岁月 感 的 匮乏 。 数 字 化 的 文件 不 
会 溅 上 茶 污 ， 这 一 点 相对 于 实体 化 的 真实 文件 来 说 是 一 个 巨大 的 优势 ， 
即 它们 在 创建 多 年 后 依然 保存 如 新 。 但 这 同时 也 意味 着 从 满 是 茶 污 的 物 
品 上 获得 的 怀旧 之 情 已 经 永远 遗失 在 数字 世界 中 了 。 


当时 这 个 想法 让 我 浮想 联翩 。 这 很 自然 ， 因 为 一 一 哇 嗓 ! 想 想 你 能 在 网 
页 上 变 出 怎样 的 戏法 ! 


网 页 上 无 法 表现 出 岁月 感 这 个 问题 确实 一 直 都 在 困扰 着 我 ,但 我 从 没 想 
过 那些 古老 的 东西 需要 以 某 种 方式 让 它们 看 起 来 古老 。 没 错 ， 许 多 网 页 
的 文章 都 会 显示 日 期 来 表明 它们 的 原始 发 布 时 间 ， 但 是 仅 此 一 个 表明 
年 代 的 迹象 通常 很 轻易 就 会 被 忽略 , 而 且 还 有 很 多 网 页 根本 就 不 显示 日 
期 一 一 没有 任何 表明 年 代 之 处 。 


比如 说 ， 我 三 年 前 写 的 一 篇 文 昔 ， 没 准 在 今天 就 会 变 成 菜 个 搜索 条 件 下 
的 第 一 条 结果 。 而 如 果 文章 中 没有 标明 发 布 日 期 的 话 ， 又 怎样 才能 让 人 



























































































































































中 尽管 书 名 中 包含 了 “模拟 输入 ”和 “数字 输出 ”的 文字 ，4mnalog In, Digital Out 其 
实 是 一 本 关于 如 何 提升 交互 设计 创造 力 的 书 。New Riders 出 版 社 于 2006 年 9 月 出 
版 。 一 一 译 者 注 





图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 


38 第 4 章 链接 生来 不 平等 
们 搞 清 楚 它 并 不 是 昨天 才 发 布 的 呢 ? 


因此 ， 我 不 时 会 收 到 几 封 电子 邮件 问 我 一 些 三 年 来 从 没 再 想 过 的 问题 。 
这 些 问题 非常 新 ， 然 而 我 以 前 的 回答 …… 可 能 就 会 显得 有 些 迟 钝 了 。 


如 果 网 页 中 表现 出 岁月 的 印记 ， 那 么 读 到 这 篇 三 年 前 文章 的 用 户 就 能 很 
清楚 地 知道 它 是 很 久 以 前 发 表 的 ， 于 是 就 会 转 去 其 他 地 方 搜索 更 新 一 些 
的 信息 ， 或 者 至 少 调整 一 下 要 发 给 我 的 问题 。 


在 参考 了 Brendan 的 想法 之 后 ， 我 决定 让 这 个 链接 列表 的 设计 更 进一步 ， 
努力 传达 出 每 个 链接 是 更 新 还 是 更 旧 。 上 毕竟 在 这 个 项 目 中 ， 越 新 意味 着 
越 重 要 。 


且 如 何 能 让 链接 看 起 来 很 日 呢 ? 


Google Reader“ 对 此 提供 了 一 种 答案 。 它 正好 在 当时 发 布 了 一 个 新 版 本 ， 
而 我 注意 到 在 里 面 有 一 种 特别 的 标签 去 9?， 它 比 大 多 数 的 标签 云 在 内 涵 上 
要 更 丰富 一 些 (有 关 标 签 云 我 们 将 在 第 5 章 专门 讨论 )。 除 了 字体 大 小 
之 外 ， 这 种 标签 云 还 使 用 了 颜色 来 表明 某 个 链接 相对 的 受 欢迎 程度 。 见 
图 4-5。 
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Tags 
The more items a tag has, the bigger it appears 


ne more of those items you have read, the darker itis 


general gigs my-sites podcasts USer-experience web-apps web-standards world-changing 








图 4-5 

在 它 下 面 有 一 行 说 明文 字 :“ 标 签 含 有 的 项 目 越 多 ， 该 标签 字 体 就 越 大 ; 
项 目 点 击 的 次 数 越 多 ， 该 标签 颜色 就 越 深 。?” 

我 觉得 这 段 说 明文 字 稍 嫌 哆 嗪 ， 但 同时 我 也 党 得 这 种 双重 指示 器 〈 字 体 
大 小 和 文本 颜色 ) 是 一 个 很 好 的 想法 ， 所 以 我 借鉴 了 它 。 

































































GD Google Reader 是 Google 提供 的 在 线 RSS 阅读 工具 。 用 户 可 以 自己 创建 阅读 名 单 ， 
及 时 获得 自己 挑选 的 内 容 或 更 新 的 信息 聚合 ， 也 能 通过 电子 邮件 将 这 些 聚 合 的 信息 
与 朋友 即时 分 享 。 网 址 为 http://www.google.com/reader。 译 者 注 

@ 标签 云 的 英文 为 Tag Cloud。 标 签 (Tag) 是 个 人 所 做 的 关键 词 标明 和 归 类 ， 便 于 对 
互联 网 上 的 内 容 进行 搜集 和 整理 。 标 签 云 则 是 所 有 标签 的 集合 ， 通 过 标签 的 字体 大 
小 来 表现 其 关联 的 文章 多 少 。 它 被 称 为 是 又 一 个 Web 2.0 元 素 。 一 一 译 者 注 
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我 根据 从 新 到 旧 的 顺序 修改 链接 列表 ， 


所 示 。 


4.1 让 环境 提示 成 为 引导 的 线索 39 








使 得 它 的 颜色 由 深 至 浅 ， 如 图 4-6 


Most recent headlines 


Title of most recent story (...) 
Title of slightly less recent story (...) 





Title of slightly less recent story (...) 





Title of slightly 


Jess recent story 
Title of slightly less recent story {,.) 


Le 

















图 4-6 








最 终 的 调整 创造 出 一 种 效果 ， 即 从 最 新 的 链接 开始 逐渐 向 下 淡化 ， 而 这 
始 ， 链 接 的 重要 程度 


也 使 得 表意 更 为 党 晰 ; 第 一 条 链 
逐条 递减 。 


非常 好 。 这 个 正 是 我 一 直 想 要 的 。 











EE 要 ， 从 它 开 





证 接 最 习 





这 种 环境 提示 在 最 终 的 网 页 中 是 不 是 真 的 起 到 了 明显 的 作 月 














有 。 会 不 会 有 人 因为 列表 最 后 的 链接 字体 太 小 而 烦恼 ? 有 可 能 ， 但 是 攻 
为 浏览 器 字体 的 大 小 可 调 ， 所 以 这 和 




















说 你 应 当 立 刻 把 这 一 招 用 在 自己 的 网 页 











E? 





























仅仅 只 在 它 真 正 会 起 作用 的 时 候 。 






































日? 或 许 并 没 














FP 情况 也 不 太 会 发 生 。 我 是 不 是 在 劝 














环境 提示 这 一 概念 在 互联 网 上 并 没有 完全 推广 开 来 ， 而 现实 中 却 存在 着 
各 种 各 样 的 应 用 方法 。 你 应 当 开阔 视野 ， 看 看 身边 有 什么 能 够 激发 灵感 ， 


























提升 自己 的 设计 。 如 果 能 够 雪中送炭 地 帮助 用 





简直 太 棒 了 。 




















不 用 强迫 自己 这 么 做 ， 但 是 请 时 刻 留意 去 寻找 机 会 ， 
现 灵感 ， 哪 怕 和 它们 看 上 去 和 你 所 做 的 事 靶 不 相干 。 


























就 会 让 你 灵光 一 内 ， 找 到 一 种 更 新 颖 、 
在 这 个 案例 中 ， 我 做 的 一 ee 而 我 


























的 出 发 点 仅仅 只 是 为 用 户 提供 导 | 





对 用 户 都 是 有 益 的 。 他 们 只 过 要 人 页 而 自动 理 



































> 》 只 赁 直觉 ， 而 不 需要 思考 和 检验 。 
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更 有 效 的 设计 思路 。 








户 找到 所 需 的 信息 ， 那 你 


同时 也 要 留意 去 发 





天 知道 它们 什么 时 候 


。 为 创建 明确 的 路 线 而 做 的 任何 事情 
解 链接 顺序 的 含 
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在 Designing the Obvious 书 中 我 曾 提 到 有 位 设计 师 带 着 他 设计 的 博客 模板 



























































来 找 我 。 这 个 设计 里 面 有 一 个 带 有 标签 云 的 工具 栏 ， 此 外 还 有 两 个 按钮 : 
一 个 是 按 标签 云 显 示 ， 男 一 个 是 按 列 表 显 示 。 

在 这 里 我 想 把 那个 故事 稍稍 再 扩展 一 下 ， 因 为 自从 写 了 Designing the 
Obvious 之 后 ， 我 又 学 到 了 一 些 东西 ， 它 们 改变 了 我 之 前 的 观点 。 


标签 云 是 一 种 链接 列表 ， 显 示 在 一 个 区 域内 ， 并 且 按 照 热 门 程度 〈 或 者 
其 他 准则 ) 来 加 重 显示 其 中 的 某 些 标签 。 最 后 的 结果 看 上 去 就 像 一 片 链 
接 的 “云层 ” 就 像 Flickr 网 站 所 设计 的 那样 "2。 见 图 5-1。 
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图 5-1 


中 示例 见 http://www.flickr.com/photos/tags/。 一 一 译 者 注 
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Flickr.com “是 第 一 个 使 用 标签 云 的 大 型 网 站 ， 而 这 个 想法 也 早已 为 无 数 其 
他 网 站 所 借鉴 。 所 以 当 这 位 设计 师 与 我 探讨 博客 模板 时 ， 我 想 的 是 :“ 酷 ! 


咱们 就 这 么 干 。 标 签 云 现在 越 来 越 流行 ， 让 我 们 看 看 这 里 是 否 也 能 





329 
o 








那 位 设计 师 根 据 自己 的 想法 已 经 做 了 非常 深入 的 设计 。 最 开始 他 建立 了 











一 个 简单 的 链接 列表 ， 堵 
如 网 5-2 所 示 。 























按照 链接 所 指向 的 内 容 热门 程度 进行 了 排序 。 


user_experience 
experience_design 
interaction_design 
Visual_design 
articles 

books 
development 
design 

code 

resources 
technology 

tools 








图 5-2 


下 一 步 ， 他 通过 某 种 程序 算法 调整 了 列表 中 每 一 个 链接 的 字体 大 小 。 链 











接 所 指向 的 内 容 越 受 欢 迎 ， 该 链接 的 字体 就 越 大 。 为 了 强调 字体 大 小 不 











同 ， 他 把 列表 按照 字母 顺序 重新 排序 ， 见 图 5-3。 








[nl 
心 | 


articles 

books 

code 

design 

development 
experience_design 
interaction_design 
resources 

technology 

tools 
user_experience 
visual_design 








图 5-3 


GD Flickrcom 是 一 个 以 图 片 服务 为 主要 的 网 站 。 它 提供 图 片 存放 、 交 友 、 组 群 、 邮 件 
等 功能 ， 其 重要 特点 就 是 基于 社会 网 络 〈Social Network) 的 人 际 关系 的 拓展 与 内 


容 的 组 织 。 这 个 网 站 的 功能 之 强大 ， 





com/。 译 者 注 











已 超出 了 一 般 的 图 片 服务 。 网 址 为 http://flickr. 
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然后 ， 他 去 掉 了 列表 
示 的 一 片 “ 标 签 云 ”。 


项 之 间 的 断 行 ， 使 它们 排列 在 一 起 成 为 如 图 5-4 所 


articles books code design 
development experience_design 
interaction_design resources technology 
oosUSer_experience 


visual_design 





























1 于 这 个 系统 既 能 文 持 按 标签 云 的 方式 显示 ， 又 能 按 普通 列表 的 方式 显 
示 ， 因 此 最 后 他 在 界面 下 方 加 上 了 一 个 Cloud 按钮 和 一 个 List 按钮 ， 使 





图 5-4 


























之 可 以 在 这 两 种 视图 之 间 相 互 切换 。 见 图 5-5。 





articles books code design 
development experience_design 
interaction_design resources technology 
tools USer_experience 


visual_design 


[Coud ) (Cust ) 








乍 看 上 去 这 是 个 很 好 的 主意 。 
C5.1 你 的 创新 是 否 有 效 


这 个 设计 的 创新 之 处 在 于 它 提 供 了 两 种 视图 。 在 此 之 前 ， 别 的 网 站 都 没 
有 在 标签 云 中 进行 过 这 种 尝试 。 而 且 这 位 设计 师 赞同 的 这 个 想法 是 源 自 
这 个 模板 开发 者 的 意见 。 

“程序 员 告 诉 我 用 户 可 能 会 希望 切换 视图 。” 他 说 。 

经 过 一 番 考 虑 ， 我 认为 应 该 更 注重 于 提高 品质 ， 而 不 是 一 味 地 创新 。 与 
























































其 便 要 在 标签 云 里 强 窒 入 一 些 所 谓 的 新 页 献 ， 还 不 如 让 它 就 那样 好 好 采 
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着 。 我 们 最 起 码 已 经 把 链接 列表 改善 成 了 标签 云 的 形式 ， 不 是 吗 ? 这 对 
于 提高 品质 来 说 已 经 足够 了 ， 况 且 添 加 儿 个 按钮 也 有 些 画 蛇 添 足 。 


我 想 那 些 知道 标签 云 是 怎么 回 事 的 人 会 从 这 种 视图 中 获得 方便 ， 而 那些 
不 理解 标签 去 的 人 所 看 到 的 仍旧 是 一 个 链接 列表 。 这 种 视图 并 未 使 任何 
人 受 损 ， 也 没有 违反 规则 。 


我 不 认为 用 户 会 在 页 面 中 浪费 时 间 瞪 着 工具 栏 看 半天 ， 然 后 琢磨 到 
底 是 该 用 标签 云 还 是 列表 。 这 里 并 不 是 必须 得 遵循 用 户 习 惯 方式 的 重要 
特性 ， 它 只 是 一 个 简单 的 链接 列表 而 已 。 所 以 我 告诉 那 位 设计 师 去 掉 那 
些 按钮 ， 只 显示 标签 云 就 行 了 。 
我 相信 我 的 观点 是 正确 的 。 但 同时 我 也 相信 当时 自己 考虑 得 还 不 够 透彻 。 
5.1.1 什么 时 候 该 说 不 

很 有 趣 的 是 ， 标 签 云 和 之 前 “环境 的 提示 ”( 我 们 在 第 4 章 讨论 过 ) 的 概 
念 有 一 点 点 背离 。 单 纯 从 技术 上 来 说 ， 它 们 起 到 的 功能 和 第 4 章 中 排序 
的 链接 列表 一 样 ， 通 过 视觉 上 的 不 同 来 传达 更 多 的 含义 。 但 是 使 用 标签 
云 需 要 一 个 前 提 ， 而 第 4 章 的 排序 列表 却 不 需要 。 

那 就 是 知识 。 

如 果真 正 想 从 标签 云 中 获得 方便 ， 就 需要 先 弄 明白 为 什么 有 些 链接 比 其 
他 的 要 大 ,或 者 比 其 他 的 颜色 深 。 而 这 些 问题 就 颇 值 得 商 榨 了 。 

我 观察 过 的 绝 大 部 分 用 户 在 碰 到 标签 云 的 时 候 ， 都 不 明白 为 什么 有 些 链 
接 比 其 他 的 要 大 。 只 有 极 少数 的 人 才 会 去 猜 它 的 原因 ， 而 其 中 又 只 有 更 
少 的 一 部 分 人 真正 在 乎 这 一 点 。 而 即使 单 击 了 某 个 标签 也 无 法 增进 他 们 
的 理解 。( 顺 便 说 一 句 ， 以 上 是 我 非 正 式 的 观察 结果 ， 非 常 欢 迎 不 同 的 观 
察 结 论 。 如 果 我 错 了 ， 请 务必 告诉 我 ! ) 

这 个 事实 意味 着 你 完全 可 以 抛弃 标签 云 的 形式 。 毕 竟 ， 用 户 也 确实 没有 
必要 理解 它 理 涵 的 逻辑 意义 。 他 们 最 终 还 是 得 到 了 一 个 链接 列表 ， 不 是 
吗 ? 
从 技术 上 来 说 ， 是 这 样 的 。 但 是 标签 链接 一 般 来 说 都 很 短 ， 基 本 上 只 包 
括 一 到 两 个 单词 ， 而 且 很 少 能 把 它们 自身 的 含义 表述 清楚 。 

以 上 所 有 这 些 事 实 告诉 我 们 ， 几 乎 没有 多 少 人 能 真正 明白 标签 云 的 含义 。 
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我 和 那 位 设计 师 说 用 户 不 会 花 时 间 关 心 如 何 个 性 化 显示 那 一 组 链接 ， 我 
只 对 了 一 半 。 


当然 ， 他 可 以 在 这 个 标签 部 分 加 上 明确 的 标题 ， 例 如 “最 受 欢 迎 的 主 
题 *。 他 也 可 以 加 上 一 些 说 明 性 文字 告诉 用 户 链 接 所 指向 的 内 容 越 受 欢 
迎 ， 该 链接 的 字体 就 越 大 。 


但 是 ， 我 应 该 告诉 他 直接 把 整个 标签 云 去 掉 ， 仅 仅 显 示 一 个 短 列 表 ， 抽 
照 受 欢 迎 程度 排序 即 可 。 为 什么 呢 ? 


因为 在 这 个 世界 上 不 存在 任何 理由 强迫 用 户 思考 ， 无 论 对 于 一 个 页 面 、 
个 场景 ， 还 是 一 个 博客 模板 。 


我 们 没有 理由 要 求 用 户 学 习 了 解 为 什么 有 些 链接 比 其 他 的 要 大 。 用 户 也 
没有 理由 被 迫 花 精力 去 学 习 标 签 云 ， 更 不 用 说 去 探究 它 的 重要 性 了 。 


Flickr 的 用 户 经 常会 上 传 大 量 图 片 以 便 和 家 人 及 朋友 们 分 享 。 而 在 
LibraryThing"， 一 个 图 书 编目 网 站 ， 用 户 会 为 自己 的 图 书 归 档 并 编制 目 
录 。 在 这 些 例子 中 ， 标 签 云 确实 有 助 于 用 户 学 习 曲 线 的 升 高 。 它 能 让 用 
户 粗略 地 看 到 人 们 是 如 何 使 用 网 站 的 ， 并 且 为 他 们 快速 地 提供 评估 信 
息 。 但 是 对 于 博客 来 说 ， 大 部 分 浏览 者 只 会 短暂 地 逗留 ， 看 一 两 篇 日 
志 ， 然 后 就 离开 。 所 以 ， 博 客 绝对 不 是 一 个 强迫 用 户 学 习 新 潮 交互 方式 
的 好 地 方 。 


如 同 刚 才 所 说 的 ， 用 户 只 会 在 页 面 短 暂 地 逗留 ， 而 不 会 考虑 如 何 个 性 化 
设置 链接 的 显示 方式 。 我 也 从 来 没 看 到 过 哪 位 用 户 会 在 第 一 次 碰 到 标签 
云 的 时 候 花 时 间 学 习 它 的 功能 特性 。 往 好 了 说 ， 它 会 迫使 用 户 在 不 必要 
的 地 方 思考 ;而 往 坏 了 说 ， 用 户 很 可 能 因此 而 困惑 ， 甚 至 烦恼 。 
这 才 是 我 当时 应 该 告诉 那 位 设计 师 的 结论 。 


不 过 我 想 ， 我 现在 已 经 告诉 他 了 。 


































































































































































































































































































JW LibraryThing 是 一 个 专注 于 书籍 的 社会 化 网 络 ， 在 功能 上 和 国内 的 豆 辩 早期 有 些 类 
似 。 该 网 站 有 着 比较 出 色 的 书籍 检索 功能 ， 用 户 能 彼此 分 享 读 过 、 正 在 读 或 喜欢 
的 书籍 。 网 址 为 http://www.librarything.com/。 该 网 站 的 标签 云 页 面 见 http:/www. 
译 者 注 


























librarything.com/tagcloud.php。 
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前 儿童 我 们 介绍 了 页 面 布局 、 

















月 标 、 站 点 导航 ， 甚 至 还 包括 如 何 创 


5.1.2 ”如 果 你 不 是 解决 方案 的 一 部 分 …… 
品牌 
导向 。 











建 环境 的 提示 来 协助 用 户 获得 














然而 ， 创 造 良好 的 第 一 印象 还 需要 时 刻 知道 什么 该 展现 ， 什 么 又 不 该 展 


























现 ， 要 有 取舍 。 当 时 那个 博客 模板 的 标签 云 就 是 由 于 我 自己 所 导致 的 失 
误 ， 而 它 对 今天 的 用 户 可 能 仍旧 有 影响 。 不 过 ， 尽 管 这 件 事 让 我 很 难受 ， 












































时 难免 仍 会 误 入 歧途 。 






































最 重要 的 是 我 们 需要 不 断 地 
设计 正 逐 步 向 自己 的 预期 靠拢 
设计 绝 不 包含 任何 运气 成 分 。 
传达 个 性 的 元 素 ， 这 其 中 的 





























o 




















但 我 意识 到 一 个 人 是 不 可 能 知道 所 有 事情 的 。 设 计 是 一 个 永 无 止境 的 学 
习 过 程 一 一 总 有 更 多 的 东西 得 去 认识 一 一 而 且 不 管 我 们 有 多 么 渊博 ， 有 











9 我 检验 做 事情 的 方式 ， 尽 可 能 确保 所 做 的 





一 个 网 站 的 外 观 、 版 式 布局 、 导 航 结构 、 
F 何 一 项 ， 乃 至 颜色 和 学 体 的 使 用 方式 ， 对 
于 第 一 印象 《以 及 随后 的 效果 ) 而 言 都 至 关 重要 。 它 们 都 需要 我 们 有 明 




















确 的 目标 ， 进 行 针 对 性 的 设计 
我 们 的 网 站 和 产品 。 


|， 才 能 传达 








E 确 的 信息 ， 而 用 户 才 会 信任 








我 们 将 在 第 6~8 章 中 看 到 ， 仪 仅 这 些 还 远 远 不 够 。 即 使 如 文本 那样 简单 












































的 东西 ， 也 同样 会 影响 用 户 对 我 们 的 看 法 、 对 产品 的 理解 ， 以 及 他 们 在 





网 站 的 辟 留 时 间 和 对 产品 持续 





再 怎样 强调 都 是 不 过 分 的 。 设 计 中 不 要 留任 何 漏洞 。 





每 件 事 都 很 重要 。 


使 用 的 时 间 。 








图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 





三 第 在 音 开门 刚 贡 ee 49 


@ 第 7 童 为 界面 做 标记 pp 55 
© 第 8 章 生动 传神 的 视频 pp 59 
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48 第 二 部 分 学 习 








你 是 否 见 到 过 那 种 占据 网 页 顶部 大 量 篇 幅 ， 却 又 只 又 长 让 人 根本 不 愿 理 
皮 的 大 段 文字 ? 是 否 遇 到 过 要 求 你 确认 是 否 取消 操作 的 对 话 框 ， 却 被 迫 
在 “取消 ”和 “确认 ”两 个 模棱两可 的 选项 间 徘 徊 不 定 ? 是 否 遇 到 过 那 
种 连 一 点 说 明 都 没有 的 复 选 框 ， 而 必须 自己 去 揣摩 、 猜 测 各 个 选项 的 意 


思 ? 


绝 大 多 数 网 络 用 户 都 碰 到 过 这 些 情 况 。 


这 些 文字 说 明和 界面 中 其 他 任何 元 素 同等 重要 。 而 且 在 大 多 数 情况 下 ， 
用 户 必须 依赖 这 些 文字 说 明 。 


在 试图 理解 某 个 网 站 ， 或 者 考虑 如 何 完成 某 项 任务 的 瞬间 ， 页 面 中 的 文 
字 将 直接 影响 我 们 对 这 个 网 站 的 信心 。 结 果 是 我 们 要 么 爱 上 这 个 网 站 ， 
要 么 从 此 敬而远之 。 


好 的 文字 可 以 解释 开发 者 的 用 意 ， 说 明 产 品 的 好 处 ， 还 能 介绍 使 用 方法 ; 
反之 ， 不 好 的 文字 则 会 把 用 户 搞 得 头 昏 脑 胀 ， 被 迫 靠 猜 测 做 决定 ， 这 很 
可 能 会 使 他 们 犯 下 错误 ， 然 后 责怪 自己 。 


人 们 使 用 我 们 的 产品 时 ， 他 们 所 知道 的 一 切 都 来 自 于 我 们 所 告诉 他 们 的 
东西 。 因 此 ， 我 们 的 职责 是 给 出 正确 的 信息 ， 而 且 要 尽 可 能 简明 清楚 。 
哪怕 是 简单 到 把 名 词 改 成 动 宾 词 组 ， 或 者 是 开门 见 山 的 几 句 话 ， 都 将 会 
深刻 地 影响 用 户 对 我 们 网 站 的 看 法 。 而 当 文字 无 法 达到 目的 时 ， 我 们 还 
可 以 通过 其 他 方式 来 解决 问题 。 

在 下 面 的 3 个 故事 中 ， 我 们 将 探讨 如 何 更 清晰 明了 地 与 用 户 沟通 。 首 先 
通过 头 两 个 故事 讨论 如 何 修改 文字 以 便 传达 更 多 的 含义 ， 而 在 第 三 个 故 
事 中 我 们 则 讨论 当 文字 无 法 胜任 时 ， 如 何 使 用 视频 来 弥补 。 
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我 曾经 与 一 个 小 型 的 在 线 教育 软件 公司 合作 为 东家 知名 航空 公司 开发 一 























套 学 习 管 理 系 统 (Learning Management System，LMS )。 这 套 系 统 能 








让 


该 公司 各 机 场 数 以 干 计 的 工人 随时 学 习 并 了 解 最 新 的 安全 措施 ， 同 时 掌 

















握 新 技术 以 提高 自身 的 技能 水 平 。 


这 些 工 人 中 绝 大 部 分 都 没有 接受 过 大 学 教育 ， 
有 的 内 容 都 必须 为 他 们 提供 透彻 的 解释 。 尽 管 这 个 想法 烦 有 些 自 以 为 
的 施舍 意味 ， 但 是 在 评审 设计 的 时 候 它 反而 帮 了 我 的 忙 。 


C6.1 为 什么 说 欢迎 辞 没 有 用 





























六 





























尘 


该 系统 首页 设计 包括 一 大 段 文 字 作 为 欢迎 入。 它 解释 说 明 用 户 可 以 在 






































指定 课程 ， 从 而 帮助 他 们 学 习 新 知识 ， 并 且 了 解 最 新 安全 规 草 。 见 
6-1。 
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因此 人 力 资源 部 门 认为 所 


目 
候 


图 
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Welcome! 


Welcome to the BigJet Course Finder! Here, you can locate courses in various 
areas of interest. With these courses, you can improve on your current skill set, 
explore other types of positions in the company, study for certification exams, 
review safety procedures, and even learn new skills. 


To get started, just browse through the course finder interface below, then choose a 
course and follow the instructions. If you choose a graded course, your score will 
be submitied to Human Resources as soon as you're done. That's all there is to it! 

















图 6-1 
我 敢 上 背 定 你 在 网 上 看 到 过 类 似 的 信息 起 码 有 一 百 万 次 了 。 但 有 多 少 次 你 


























去 读 过 呢 ? 


Jakob Nielson 在 他 的 Alertbox 专栏 "“ 上 废话 文本 : 保留 、 删 减 还 是 去 
掉 ? ”2 一 文中 指出 ， 人 们 通常 不 会 在 网 页 上 阅读 文字 ， 他 们 只 是 扫描 。 
如 果 是 更 长 的 介绍 性 文字 ， 人 们 往往 会 直接 忽略 。 也 就 是 说 ， 篇 幅 短 的 
文字 才 有 可 能 吸引 一 部 分 注意 力 〈 假 设 它 真 的 有 用 )， 从 而 有 助 于 用 户 理 









































QD Jakob Nielson 是 尼尔森 - 诺 曼 集团 的 主要 负责 人 之 一 ， 在 Web 可 用 性 领域 内 被 
公认 为 世界 的 权威 。 他 的 作品 很 多 ， 包 括 畅销 全 球 的 Designing Web Usability 一 
书 。 他 的 Alertbox 专栏 于 1995 年 开始 在 互联 网 上 发 布 ， 网 址 为 http://www.useit. 
com/。 一 一 译 者 注 

@) 这 篇 文章 英文 名 为 “Blah-Blah Text: Keep, Cut, or Kill?”， 原 文 见 http:/www.useit. 


com/ alertbox/ intro-texthtml。 一 一 译 者 注 
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解 他 们 正在 看 什么 。 
在 大 信息 量 的 站 点 里 我 们 会 专注 于 阅读 ， 然 而 当 探索 一 个 新 的 Web 应 用 
星 序 时 则 与 之 相反 。 我 们 会 寻找 那些 显赫 的 线索 ， 目 的 是 为 了 了 解 这 个 网 
站 是 干什么 的 ， 它 是 如 何 运 转 的， 以 及 弄 明 白 要 想 使 用 它 ， 我 们 需要 做 什 
么 事情 。 换 句 话说 ， 我 们 考虑 的 是 做 ， 而 不 是 读 。 我 们 希望 将 事情 搞定 ， 
因此 采取 的 每 一 个 步骤 都 是 为 了 完成 某 件 事情 ， 不 管 这 件 事情 是 什么 。 
比如 说 ， 看 到 这 个 欢迎 辞 的 时 候 ， 我 立刻 绕 过 它 ， 把 注意 力 集中 在 课程 
列表 中 去 。 屠 才 是 这 个 页 面 最 主要 的 交互 元 素 。 


C6.2 为 扫描 而 设计 


不 过 最 后 我 还 是 扫 了 一 眼 欢迎 辞 ， 因 为 评审 这 个 设计 是 我 的 工作 。 但 是 
当 我 扫 过 这 些 文字 的 时 候 ， 看 到 的 是 如 图 6-2 所 示 的 内 容 。 











~ 
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Welcome! 


Blah blah blah blah blah blah blah blah blah blah blah locate courses blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah. 


Blah blah blah blah blah blah blah blah course finder blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah! 














图 6-2 
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你 阅读 欢迎 辞 时 所 看 到 的 内 容 大 概 与 此 非常 相似 。 我 们 更 感 兴趣 的 是 要 
完成 什么 事情 ， 而 不 是 阅读 一 段 训 无 目的 、 对 达成 目标 室 无 帮助 的 文字 。 


第 一 个 问题 就 出 在 这 段 文字 的 标题 是 “欢迎 ”， 这 就 好 像 公司 在 某 个 节 假 
日 派对 上 打开 办 公 室 的 大 门 迎接 客人 。 但 是 这 里 不 是 个 节假日 派对 ， 而 
是 个 网 站 。 浏 览 者 们 也 并 不 是 客人 ， 而 是 有 好 多 工作 要 忙 的 人 。 他 们 为 
了 完成 公司 规定 的 安全 课程 中 断 自 己 的 正常 生活 ， 或 者 为 了 获得 升 职 的 
机 会 而 被 迫 学 习 某 项 新 技术 。 


他 们 并 不 关心 自己 是 否 受 欢 迎 ， 他 们 关心 的 是 找到 某 个 课程 。 


所 以 首先 ， 让 我 们 给 他 们 一 些 自信 ， 把 标题 改 成 Find a course( 找 到 你 的 
课程 ) 可 以 让 他 们 知道 自己 打开 了 正确 的 页 面 。 见 图 6-3 。 



































Find a course 


Blah blah blah blah blah blah blah blah blah blah blah locate courses blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah. 


Blah blah blah blah blah blah blah blah course finder blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah! 














图 6-3 
好 多 了 。 但 是 那 一 大 段 思 每 的 文字 还 在 那儿 ， 我 们 来 把 它 变 得 更 有 用 一 些 。 
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“赶快 行动 ”词组 
“赶快 行动 ”词组 是 用 来 激发 人 们 做 出 某 种 行为 的 一 组 字 词 。 它 近似 于 一 
种 命令 ， 比 如 “ 回 你 的 房间 去 ” 但 又 不 会 那么 缺乏 友善 。 


你 曾经 见 过 它们 ， 可 能 也 不 少 于 一 百 万 次 了 。 它 们 一 般 被 陈述 成 这 样 : 
“保存 更 改 ” “阅读 更 多 ”以 及 “登录 网 站 ”。 
它们 还 易于 扫描 。 因 为 使 用 动 宾 词 组 能 够 准确 地 告诉 用 户 即将 发 生 什么 ， 
同时 还 能 让 他 们 感到 自己 才 是 软件 的 指挥 者 。 


使 用 Find a course 作为 页 面 标题 能 够 帮助 用 户 了 解 在 这 个 页 面 上 他 们 要 
干 些 什么 ,但 是 那 一 大 堆 文 字 却 没 能 提供 多 少 具体 的 内 容 。 


因此 下 一 步 我 们 需要 去 掉 这 些 文字 ， 然 后 用 更 简练 、 明 确 的 话 奉 代 ， 并 
且 在 里 面包 含 “ 赶 快 行动 ”的 陈述 。 


在 这 个 案例 中 ， 要 想 解 释 页 面 的 主要 目的 ， 我 要 使 用 的 文字 连 一 个 段落 
都 不 到 。 很 多 时 候 所 需要 的 仅仅 只 是 一 句 话 而 已 ， 在 解释 你 在 页 面 中 能 
干什么 的 同时 就 能 说 明 它 的 目的 、 好 处 和 使 用 方法 。 

经 过 慎重 考虑 我 开始 设法 扭转 现 有 的 局 
和 汪 肌 风 关 全 二 十， 类 后 全 二 种 间 的 -机 二， 中国 

































































































































































Find a course 


Locate a course, then click its title to get started 














图 6-4 
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非常 好 。 做 到 这 样 也 并 不 困难 ， 不 是 吗 ? 


























新 的 页 面 版 本 直入 主题 ， 这 样 我 们 不 会 浪费 用 






































中 
由 











但 不 笠 的 是 ， 





事情 并 不 那么 简单 。 












































客户 不 愿意 放弃 欢迎 秤 里 面 的 文字 。 很 显然 ， 
精 竟 虑 ， 而 且 确实 花 缆 了 相当 多 的 时 间 考 虑 如 何 让 措辞 完美 。 


“如 果 用 户 需 要 更 多 的 信息 怎么 办 ? ”他 们 问 道 。 


















































“他 们 不 会 ”我 回答 。 
这 种 争论 似乎 无 法 得 出 合适 的 结论 。 


最 后 结束 这 场 争论 的 却 是 这 样 一 句 话 : 
























































E 何 时 间 。 


的 茶 个 人 为 了 它 型 








“这 些 人 只 有 高 中 文化 水 平 ， 如 果 他 们 读 了 这 些 我 才 会 吃惊 呢 。”( 咖 嘿 














冷笑 ) 














该 公司 人 力 资源 部 门 对 自己 员工 智能 水 平 的 判断 ， 我 对 其 完全 持 保 留 态 








度 。 然 而 这 样 一 来 事情 变 得 好 像 缩减 文本 成 了 他 们 的 主 














EE 
导 。 


他 们 采用 了 我 的 设计 。 而 且 据 我 所 知 ， 该 网 页 从 没有 出 现 过 人 们 不 知 如 








何 使 用 或 者 不 明白 它 能 做 什么 等 方面 的 问题 。 























从 这 一 课 我 们 能 学 到 什么 ? 

















对 用 户 来 说 ， 一 个 简短 的 句子 远 比 一 大 段 文字 要 

















;有 意义 ， 即 使 这 段 














文字 的 文笔 很 好 。 重 要 的 并 不 是 我 们 提供 的 信息 




















否 给 他 们 提供 真正 需要 的 信息 。 














有 多 大 ， 而 是 我 们 能 
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最 近 我 为 一 家 在 线 教学 软件 公司 的 产品 做 可 用 性 评 
于 Web 的 课程 创建 工具 ， 已 经 是 第 二 个 版 本 了 。 


这 款 产 品 主要 为 在 线 教学 系统 的 开发 者 设计 。 比 较 庚 悉 在 线 教学 课件 以 
及 成 绩 跟踪 系统 的 人 可 以 通过 这 个 工具 选择 模板 、 创 建 幻 灯 片 ， 从 而 在 
较 短 的 时 间 内 创建 好 自己 的 课程 。 用 户 要 做 的 是 开设 某 个 新 课程 ， 创 建 
所 需要 的 幻灯 片 并 为 其 选择 模板 ， 然 后 填写 一 些 表单 以 便 为 每 张 幻灯 片 
添加 内 容 。 


当 我 评审 这 个 应 用 程序 的 时 候 ， 脑 子 里 经 常 出 现 一 个 念头 ， 认 为 它 完 
可 以 面向 更 多 的 受众 群体 。 只 需要 一 些 相对 简单 的 调整 ， 这 个 产品 就 能 
适用 于 培训 设计 师 、 人 力 资 源 部 门 以 及 更 多 的 人 ， 而 不 仅仅 只 是 面向 熟 
知 在 线 教学 课程 开发 的 专业 人 士 。 

自然 ， 扩 大 了 用 户 群 也 就 意味 着 能 为 公司 带 来 更 多 的 利润 。 不 出 所 料 ， 
客户 非常 赞同 这 个 想法 ， 因 此 我 把 自己 的 评审 意见 更 多 地 集中 在 如 何 实 
现 这 一 点 上 面 。 

由 创建 课程 的 界面 开始 ， 在 这 里 用 户 需 要 填写 课程 ID 和 标题 ， 然 后 选择 
一 系列 选项 来 建立 新 课程 。 如 图 7-1 所 示 。 
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New Project Course Properties 
New project ID Tile 
Tracking Options 
Choose ... [Narration button 国 Exitbutton 
国 Glossary button 国 Audio button 
COUBeieompleuon 加 Page numbering 国 Persistentindex 
El 国 Useindextooltip 国 Use course logo 
Page transition 
Choose ... 6 
Transition time 
Transition direction 
Choose ... ? 
图 7-1 
因为 我 完全 不 知道 应 该 如 何 填写 有 效 的 课程 ID， 所 以 我 输入 了 My 


























Project。 完 成 表单 之 后 ， 得 到 了 如 图 7-2 所 示 的 一 个 错误 信息 。 





Error 





The project id "My Project' is invalid. 

















图 7-2 





噢 ， 谢 谢 。 但 是 为 什么 它 会 无 效 呢 ? 我 怎样 才能 使 之 有 效 ” 有 效 的 课程 
ID 看 起 来 应 该 是 个 什么 样子 ? 


这 个 界面 “假设 ”我 具备 很 多 相关 经 验 。 它 上 





于 这 种 “假设 ”之 上 的 。 
停止 标记 你 的 “假设 ” 


互联 网 上 存在 着 无 数 缺 少 上 下 文 语 境 的 输入 栏 、 复 选 框 和 单 选 按钮 。 它 


O77.1 


们 要 求 月 


























面 所 有 控件 的 标记 都 是 基 








昌 户 输入 、 选 择 ， 却 不 解释 这 些 行为 的 含义 。 


我 们 经 常 自以为是 地 猜测 用 户 对 产品 的 理解 程度 。 当 我 们 在 某 个 复 选 
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框 后 面 写 上 Persistent index (持久 索引 )， 或 者 在 某 个 输入 栏 旁 边 写 上 





Newproject ID 〈 新 课程 ID ) 的 时 候 ， 总 是 在 假设 用 户 会 明白 我 们 的 意思 。 


我 们 先 做 假设 ， 然 后 去 标记 这 些 “ 假 设 ”。 

















就 在 这 个 界面 中 ， 其 实 我 们 是 在 要 求 用 户 为 了 使 | 
































我 们 的 软件 ， 他 们 必须 
知道 一 些 只 有 我 们 才 知 道 的 事情 。 我 们 要 求 用 户 必须 先 揣测 我 们 的 心思 。 

















如 果 用 户 失败 了 ， 我 们 还 经 常 因此 而 责怪 他 们 。 难 道 这 不 是 很 搞笑 吗 ? 


现在 告诉 你 如 何 修正 这 个 问题 。 











检查 应 用 程序 中 每 一 个 控件 的 标记 ， 并 且 问 问 自 











己 ， 一 个 从 没 见 过 这 个 








程序 的 人 是 否 也 能 明白 它 的 意思 。 把 所 有 回答 是 














单 ， 要 么 修改 这 些 标记 使 其 变 得 通俗 易 懂 ， 要 么 





屏幕 截图 、 小 短片 等 ) 解释 它们 。 

















“不 ”的 项 目 列 一 个 清 
加 上 说 明 元 素 〈 文 本 、 





























把 所 有 回答 为 “是 ”的 项 目 同样 也 列 一 个 清单 ， 
没 接触 过 这 个 程序 的 人 看 。 


根据 他 们 看 的 情况 ， 佑 计 你 还 得 再 改 儿 条 。 





















































并 把 这 个 清单 给 3 个 从 









































i 


不 过 ， 用 不 着 难受 。 今 天 早 些 时 候 我 自己 的 列表 








有 E 面 都 至 少 改过 3 条 呢 。 























至 于 前 面 说 的 可 用 性 评审 ， 一 开始 我 为 课程 也 提出 了 简单 的 改进 建议 ， 只 




















是 加 上 了 一 点 文字 ， 显 示 有 效 的 课程 ID 应 该 是 什么 样子 。 见 图 7-3 左 侧 。 


























New Project Course Properties 

New project ID Tiue 

No spaces (8.9. "WyProject/D"} 

| Options 

Tracking 贺 Narration button 辐 Exitbutton 
[Shoose... 忆 国 Glossary button 国 Audio button 





国 Page numbering 














加 ”Persistent index 











Course completion 1 
[ Choose ... s 加 Use index tooltip 国 Use course logo 
Page transition 
Choose .… < 
Transition time 








Transition direction 























图 7-3 
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第 一 步 近 出 来 之 后 就 很 简单 了 ， 我 只 需要 把 这 个 想法 扩展 到 界面 其 余 的 





控件 上 面 去 。 























首先 ， 为 大 部 分 控件 加 上 相关 帮助 文档 的 链接 。 其 次 ， 为 各 输入 栏 加 上 
说 明 性 文字 ， 解 释 什 么 样 的 输入 才 是 有 效 的。 最 后 ， 修 改 几 处 标记 ， 使 
它们 的 意义 表达 得 更 为 清楚 。 例 如 ，Transition time (切换 时 间 ) 变 成 了 
Transition time，in seconds (切换 时 间 ， 单 位 : 秒 )。 见 图 7-4。 


New Project 


New project ID 
No spaces (6.9. "MyProjectID"} 





Course Properties 


Tie 
This will appear in the published course. 

















Tracking method (Whats this?) 


Options 





[Narration button (?) 同 Exit button (2) 





Course completion (Whats this?) 

















国 Glossary button (7? 国 Audio button (7?) 
[ Page numbering (7 辐 Persistentindex (2) 
[Use index tooltip (7 [ Use course logo (») 


Page transition (2 
Choose ... 号 














Transition time, in seconds (yhat's Inls?) 
6@.9. 1.5 











Transition direction (yyhars this?}) 








Choose ... 阳 














图 7-4 


设计 不 能 只 基于 我 们 自己 一 大 情愿 的 “假设 ”。 相反， 我 们 需要 假设 用 户 
毫 不 了 解 我 们 的 软件 ， 随 后 给 他 们 足够 的 信息 以 便 帮 助 他 们 理解 。 


说 明 性 文字 、What's this?( 这 是 什么 ?”) 链接 以 及 表意 清楚 的 标记 都 能 


达到 这 一 目的 。 
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我 大 部 分 的 工作 都 是 在 指导 别人 如 何 能 让 事情 变 得 一 目 了 然 。 但 是 偶尔 
我 自己 也 会 有 那 种 突然 被 内 电击 中 的 感觉 一 有些 过 于 明显 的 东西 我 却 
一 直 视 而 不 见 。 


有 一 次 我 为 某 款 产品 做 可 用 性 评审 ， 就 发 生 过 这 样 的 情景 。 


那天 我 发 现 自己 正在 绝望 地 试图 用 书面 文字 来 解释 在 某 个 表单 中 一 个 输 
入 栏 的 问题 ， 它 没有 向 用 户 说 明 自 己 有 字数 限制 。 这 个 输入 栏 里 面 只 能 
输入 50 个 字符 ， 但 却 没有 相关 的 说 明 。 因 此 当 达 到 字数 限制 时 ， 新 输入 
的 字符 就 不 再 显示 了 。 这 看 上 去 就 好 像 我 的 键盘 突然 失 录 了 一 样 ， 我 敲 
击 键盘 没有 任何 反应 。 


那天 我 绞 尽 脑汁 想 把 措 词 整理 得 顺 当 一 点 ， 以 便 把 这 个 现象 说 清楚 。 我 
想到 过 是 否 该 使 用 一 两 张 屏幕 截图 ， 但 那 又 有 什么 用 呢 ? 客户 通过 这 些 
截图 所 能 看 到 的 只 是 一 个 里 面 满 是 字符 的 输入 栏 而 已 。 它 们 无 法 表现 出 
屠 种 键盘 失灵 时 的 无 力 感 和 挫败 感 。 

















































































































































































































































































































我 又 想 是 否 可 以 把 每 一 步 都 写 出 来 ， 把 整个 过 程 描述 一 壳 。 但 是 那样 似 
乎 工作 量 会 很 大 ， 而 且 如 果 连 简单 的 措 词 都 不 能 使 自己 满意 的 话 ， 就 更 
不 能 指望 写 一 大 堆 步 又 能 好 到 哪里 去 了 。 

而 就 在 这 时 那 道 内 电 出 现 了 。 














视频 ， 你 这 个 白痴 。 视 频 ! 
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C8.1 视频 演示 胜 过 王 言 万 语 
视频 演示 片段 ， 也 就 是 大 家 所 说 的 Screencast”， 现 在 已 经 应 用 到 各 种 网 








站 中 去 了 。 这 可 能 是 因为 创建 网 络 视频 文 


比如 在 Basecamp2 〈 由 37signals“ 开 发) 
尚未 创建 内 容 的 页 面 ) 都 提供 了 一 个 Scre 


这 就 是 Screencast 其 中 一 项 伟大 的 用 途 ， 




















件 变 得 越 来 越 容易 吧 。 


里 面 ， 每 一 个 “空白 页 ”( 用 户 
encast， 如 图 8-1 所 示 。 


而 且 相 当 到 位 。 在 用 户 需要 的 





























帮助 他 们 很 快 上 手 ， 这 真是 一 件 令 人 安心 























瞬间 ， 他 们 能 很 快 地 学 会 如 何 使 用 这 个 程序 。 我 经 常 使 用 Basecamp 来 管 
理 客户 项 目 。 大 多 数 客户 都 是 第 一 次 使 用 Basecamp， 但 是 有 这 些 视频 能 



































的 事情 。 














而 超越 这 一 功能 并 且 名 声 大 振 的 则 是 Common Craft Show “里 面 创建 的 视 
频 。 这 些 短片 本 质 上 来 说 并 不 是 Screencast， 因 为 它们 并 不 是 电脑 屏幕 录 






































象 ， 但 却 能 非常 生动 、 活 泼 地 介绍 一 些 新 














的 或 经 常 为 大 众 所 误 解 的 技术 。 


图 8-2 中 的 这 个 视频 探讨 的 是 小 型 节能 荧光 灯 管 。Common Craft 也 创建 


过 关于 维基 百科 、RSS， 甚 至 在 线 图 片 分 享 等 方面 的 视频 。 





GD Screencast 这 一 网 络 术 语 尚 无 一 个 公认 的 中 文 译 和 名。 所 谓 Screencast 指 的 是 一 种 个 











人 使 用 





二 




















屏幕 录制 软件 制作 的 视频 文件 ， 通 过 某 种 方式 〈 通 常 是 Flash 格式 文件 ) 放 

















到 网 上 共享 ， 以 达到 娱乐 或 者 教学 、 示 范 的 目的 。 其 在 英文 维基 中 的 解释 如 下 : 








“Screencast 是 一 种 计算 机 屏幕 输出 的 数字 记 




















录 ， 也 被 称 为 是 屏幕 录像 视频 。 它 通常 








也 包含 一 些 叙 述 性 的 音频 。 尽 管 Screencast 这 个 名 词 在 2004 年 才 出 现 ， 但 如 Lotus 











ScreenCam 般 的 产品 在 1994 年 即 已 开始 使 | 








行 编辑 也 很 受 限 制 。 但 如 今 已 能 支持 更 为 简洁 的 文件 格式 ， 如 Adobe Flash， 并 且 
支持 更 多 的 编辑 操作 ， 例 如 改变 顺序 、 鼠 标 路 径 追 踪 ， 以 及 音频 等 。 如 果 说 屏幕 截 
图 是 用 户 屏幕 的 一 张 静 态 图 片 ， 那 么 Screencast 本 质 上 就 是 用 户 在 他 们 监视 器 上 所 
看 到 的 一 段 影片 。” 具 体 页 面 见 http://en.wikipedia.org/wiki/Screencast。 一 一 译 者 注 
@) Basecamp 是 一 个 基于 Web 的 项 目 管理 和 协作 工具 。 





















































分 配 任务 、 发 表意 见 或 反馈 、 安 排 日 程 、 
译 者 注 








basecamphq.comy/。 








。 早 期 产品 生成 很 大 的 文件 ， 对 其 进 



































日 户 可 以 通过 互联 网 写作 并 
网 络 共享 文件 等 。 网 址 为 http://www. 

















@ 作为 Web 2.0 的 经 典 网 站 ，37signals 因为 开发 了 Ruby on Rails 和 一 系列 基于 Web 








的 工具 而 闻名 天 下 。 网 址 为 http://www.37signals.com/。 








译 者 注 





由 Common Craft Show 是 Common Craft 公司 日 


图 ， 只 有 夫妇 二 人 。 如 他 们 自己 所 说 ， 公 司 


网 络 展览 项 目 。 该 公司 位 于 美国 西 雅 
的 产品 就 是 “解释 ”。 该 夫妇 使 用 白板 、 




















油性 笔 和 纸 片 制作 各 种 视频 短片 让 复杂 的 事物 变 得 容易 理解 。 网 址 为 http://www. 


commoncraft.com/。 一 一 译 者 注 
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Make lists, add items, and check them off. Get things done with to-do lists. 





Learn about to-do lists: Watch a video demo below 
You can watch this video or view a screenshot any time from Ir 








thecommoncraftshow 





Video: New Light Bulbs in Plain English 





图 8-2 


这 些 视 频 其 实 需要 艰辛 繁琐 的 制作 过 程 。 制 作者 需要 在 白板 上 创建 一 系 
列 图 画 ， 并 且 为 这 里 面 的 每 一 幅 图 画 的 每 一 个 步骤 进行 叙述 性 的 拍摄 ， 
此 外 讲述 者 还 需要 手绘 一 些 漫画 作为 补充 。 这 些 视 频 的 目的 是 讲述 那些 
技术 是 如 何 工作 的 并 且 给 人 们 带 来 了 什么 好 处 。 


8.1.1 使 用 视频 来 表述 问题 


突然 想起 用 视频 来 传达 信息 的 种 种 好 处 ， 我 意识 到 自己 也 可 以 用 一 个 短 
片 来 向 客户 解释 输入 栏 的 问题 ， 这 样 就 不 需要 再 花 精 力 去 说 明了 。 一 目 
了 然 ， 不 是 吗 ? 
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因此 我 马上 重新 开始 ， 再 次 尝试 在 输入 栏 中 融入 50 个 以 上 的 字符 ， 并 且 



































把 整个 过 程 的 屏幕 都 录 了 下 来 。 与 此 同时 我 也 录制 了 声音 ， 这 样 客户 就 








能 在 看 的 同时 听 到 我 无 济 于 





ene 








事 地 敲 击 键盘 。 见 图 8-3。 





图 KeyRepeat.mov 





| Image and Audio Settings 





我 甚至 还 加 入 了 一 点 口头 叙述 以 便 表现 出 在 这 种 情境 下 用 户 可 能 会 想 什 
“我 的 键盘 …… 坏 了 。 没 反应 了 。 我 不 知道 为 什么 。 也 许 它 的 接 
了 …… 不 是 。 也 许 我 是 个 智障 …… 不 是 ， 我 是 个 MBA。 也 许 我 需要 
电脑 。 太 没劲 了 一 一 我 才刚 刚 喜欢 上 这 个 网 站 。 响 ， 好 吧 。” 














图 8-3 
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mph 
逊 这 








20 秒 钟 后 ， 一 切 搞定 。 我 重播 了 一 次 ， 以 确保 录制 效果 不 错 。 就 这 样 ， 灵 














光一 内 不 到 一 分 钟 就 解决 了 问题 ， 而 且 比 一 开始 预料 的 要 生动 有 效 得 多 。 


长 








你 很 难 和 视频 去 辩论 什么 。 


就 在 这 次 小 小 的 成 功 之 后 ， 








当 我 把 这 段 视频 和 其 他 评审 意见 发 给 客户 之 后 ， 他 们 明白 了 我 的 意思 。 





















































想法 


8.1.2 ”使 用 视频 来 表述 











我 意识 到 如 果 能 用 视频 来 描述 问题 ， 那 么 也 











同样 可 以 用 它 来 描述 那些 想法 ， 这 和 用 原型 (Prototype) 来 描述 是 一 样 
































的 。 视 频 能 直接 放 到 客户 














自前 让 他 们 看 ， 然 后 让 他 们 思考 ， 然 后 再 看 一 


























裔 。 而 不 需要 任何 解释 。 


























我 可 以 录制 一 段 视频 来 说 明 某 个 交互 应 当 怎 样 发 生 才 最 为 合理 ， 并 且 加 
上 少许 叙述 ， 而 不 用 把 这 些 过 程 全 都 写 出 来 。 这 就 像 一 个 原型 的 视频 版 


本 ， 或 者 说 一 个 Screencast 的 原型 版 本 。 随 即 一 个 词 跳 入 我 脑子 
天 才 。 天 才 啊 ， 伙 计 ! 如 果 你 此 刻 听 到 一 声 小 小 的 “ 哇 哈 哈哈 哈 ” 那 其 



































实 是 我 为 自己 的 才华 得 意 大 笑 的 回声 。 
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一 开始 我 就 像 个 白痴 ， 但 现在 我 得 到 了 补偿 ， 而 且 是 双 倍 的 。 


不 管 怎样 ， 我 立刻 找到 了 这 样 做 的 全 部 理由 ， 并 且 在 我 后 来 呈 交 给 客户 
的 设计 文件 中 都 会 包含 一 些 视频 演示 片段 。 这 些 简 单 的 屏幕 录像 节省 了 
我 大 量 的 时 间 ， 而 且 在 绝 大 部 分 情况 下 ， 它 们 所 传达 的 内 容 比 之 前 那 种 
一 步 一步 的 文字 案例 描述 要 生动 、 丰 富 得 多 。 


C8.2 极为 简单 的 视频 演示 艺术 


为 网 站 创建 视频 演示 片段 或 者 说 是 Screencast， 是 一 个 很 简捷 方便 的 过 
程 。 只 要 你 有 合适 的 工具 ， 并 且 愿 意 花 几 分 钟 时 间 做 准备 。 


首先 ， 搞 清楚 你 要 传达 什么 内 容 。 在 大 多 数 案例 中 ， 我 只 想 展示 交互 动 
作 应 当 怎 样 发 生 ， 因 此 我 所 需要 做 的 就 是 展现 一 系列 界面 的 屏幕 状态 
并 且 解 释 在 每 一 个 界面 中 用 户 应 该 做 些 什么 才能 到 达 下 一 个 屏幕 状态 
最 后 完成 交互 。 

举 个 例子 ， 为 一 个 五 星 级 的 界面 做 视频 演示 的 时 候 ， 你 需要 展现 的 部 分 
包括 ， 默认 状态 、 单 击 哪里 来 设置 评级 ， 单 击 之 后 屏幕 上 会 发 生 什么 、 
如 何 完成 评级 ， 以 及 完成 后 屏幕 是 什么 样 。 这 个 过 程 看 起 来 很 明确 ， 但 
这 同时 也 意味 着 需要 通过 某 种 方式 来 创建 一 个 简单 原型 ， 这 样 才能 通过 
单 击 进入 各 个 状态 。 


我 更 喜欢 OmniGraffle "， 因 为 我 经 常 使 用 它 并 且 非 常 方便 。 当 然 你 也 可 以 
使 用 Adobe Flash、IMicrosoft Visio 〈 只 适用 Windows 系统 )、Gliffy2 (基于 
Flash 的 Web 应 用 程序 ， 与 Visio 很 相似 )， 甚 至 Microsoft PowerPoint。 


例如 在 Flash 中 ， 你 可 以 创建 一 系列 帧 ， 每 一 帧 都 显示 一 个 不 同 的 屏幕 状 
态 〈 使 用 线 框图 或 者 高 质量 的 设计 图 稿 )， 然 后 为 每 个 可 点 击 的 项 目 简单 
地 创建 按钮 动作 。 最 后 发 布 文件 并 用 屏幕 录制 工具 记录 下 完成 交互 的 每 


一 个 步骤 。 
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人 OmniGraffle 是 the Omni Group 公司 的 产品 ， 现 已 发 布 至 第 5 个 版 本 。 它 是 一 款 流 
程 图 及 界面 原型 绘制 软件 ， 界 面 美观 ， 能 支持 Visio 文件 格式 。 但 只 适用 于 Mac 系 
统 。 网 址 为 http://www. es 8 译 者 注 

© J 是 一 款 在 线 绘 4， 用 户 能 使 用 该 软件 绘制 UML 建 模 序 列 图 、 流 程 图 、 

组 织 图 、 室 内 设计 > 扑 图 等 ， 功 能 强大 。 绘 制 好 的 作品 可 以 保存 并 发 布 到 
自己 的 Blog 中 。 网 址 为 http://www.gliffy.com/。 一 一 译 者 注 
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录制 屏幕 时 可 以 使 用 各 种 各 样 的 工具 。 我 使 用 的 是 Snapz Pro X? 了 (只 适 
日 Mac 系统)， 录 人 制 影片 时 就 像 屏 幕 截图 一 样 





| 
































简单 。Windows 用 户 可 以 





选择 TechSmith 公司 的 Camtasia Studio2， 操 作 方 式 大 同 小 异 。 
最 新 也 最 酷 的 屏幕 截图 和 录像 工具 则 是 TechSmith 公司 发 布 的 Jing 了。 这 























是 一 款 免 费 软件 ， 见 图 8-4。 

















单 击 儿 次 就 可 以 创建 屏幕 截图 或 者 视 
频 ， 而 得 到 的 文件 可 以 通过 软件 自 
动 赋予 的 URL 地 址 或 者 Screencast. 
com “账号 与 所 有 人 分 享 。 


换 句 话说 ， 录 制 完 一 段 影 片 之 后 ， 你 
可 以 单 击 共享 图 标 把 该 影片 上 传 到 
Screencast.com 中 去 。 你 可 以 粘贴 它 
的 URL 地 址 〈 当 视频 上 传 后 这 个 
URL 会 自动 复制 到 你 的 剪贴 板 中 )， 也 可 
























































运用 文字 显得 困难 时 ， 考 虑 使 用 视频 来 帮助 你 的 月 


























图 8-4 
影片 过 段 时 间 再 发 布 。 
日 户 快 速 上 手 吧 。 








噢 ! 还 有 ， 如 果 人 碰巧 你 在 我 之 前 已 经 想到 了 视频 演示 这 个 主意 …… 别 让 














我 知道 。 我 宁愿 继续 相信 它 是 我 的 独家 发 明 。 


谢谢 。 











GD Snapz Pro 是 一 款 全 能 的 屏幕 截图 软件 。 用 






































复 截 取 不 同 部 分 再 用 Photoshop 拼接 。 

















夺 截 屏 。 其 中 全 窗口 截屏 功能 ps 





户 可 以 设 定 全 屏 、 当 前 窗口 、 自 选区 域 范 
人 而 无 需 使 滑动 条 重 





























各 屏幕 动作 录制 为 QuickTime 影 





片 ， 并 能 同时 记录 系统 内 的 数码 音频 信号 ws 网 址 为 http://www. 





ambrosiasw.com/utilities/snapzprox/。 


译 者 注 





@ Camtasia 能 在 任何 颜色 模式 下 轻松 地 记录 屏幕 动作 ， 包 括 影像 、 音 效 、 鼠 标 移动 轨 
迹 、 解 说 声音 等 等 ， 还 能 对 视频 片段 进行 剪接 ， 添 加 转 场 效 果 ， 并 可 将 电影 文件 
打包 成 EXE 文件 ， 在 没有 播放 器 的 电脑 上 也 能 播放 。 网 址 为 http://www.techsmith. 




















com/camtasia.asp。 一 一 译 者 注 























@ Jing 能 够 支持 Mac 及 Windows 系统 ， 在 Windows 下 则 需要 .Net 3.0 组 件 支持 。Jing 
集成 了 TechSmith 的 另外 一 项 服务 Screencast( 专门 存储 截屏 文件 的 空间 )， 用 户 可 以 


在 截屏 或 录制 后 直接 把 文 伯 Pia Screencast 中 ， 同 时 还 
调用 把 视频 内 置 到 自己 的 Blog 里 。 网 址 为 http:/wwwjingprojectcomy。 
外 该 网 站 网 址 为 http:/www.screencast.com/。 一 一 译 者 注 

































































能 像 YouTube 那样 通过 代码 
译 者 注 
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66 第 三 部 分 搜索 


把 被 动 的 网 站 浏览 者 转变 为 主动 的 活跃 用 户 其 实 很 简单 ， 只 需要 把 他 们 
的 目标 从 浏览 转变 为 搜索 。 而 且 搜 索 是 人 们 在 互联 网 上 最 基本 而 又 最 重 
要 的 任务 之 一 。Google 告诉 我 们 ， 好 的 搜索 引擎 可 以 让 人 们 在 数秒 钟 之 
内 找到 任何 方面 的 资料 一 一 没有 做 不 到 ， 只 怕 想 不 到 。 


当然 ， 并 不 是 所 有 的 搜索 引擎 都 像 Google 那么 好 用 。 事 实 上 ， 有 很 多 搜 
索引 擎 在 提供 信息 和 人口 方 面 都 做 得 极 差 。 这 并 不 一 定 是 因为 引擎 的 算法 
问题 ， 其 实 有 些 算法 相当 不 错 。 


问题 经 党 出 在 界面 上 。 


事实 是 这 样 的 : 绝 大 多 数 使 用 过 搜索 引 警 的 人 都 用 过 Google， 而 绝 大 
多 数 用 过 Google 的 人 都 把 它 当 作 是 完美 搜索 的 黄金 标准 。 如 果 不 是 
Google， 那 么 就 是 垃圾 。 


在 这 种 情况 下 ， 我 们 该 如 何 竞争 ? 我 们 该 怎样 才能 为 用 户 提 供 他 们 想 要 

的 信息 ， 而 不 是 眼睁睁 看 着 他 们 离 去 然后 打开 Google ? 我 们 该 怎样 帮助 

用 户 快速 找到 正确 的 信息 ? 而 在 用 户 看 到 搜索 页 面 或 搜索 结果 列表 的 时 

刻 ， 我 们 又 该 怎样 帮助 他 们 快速 上 手 ? 

为 了 回答 这 些 问 题 ， 我 要 讲 3 个 故事 ， 分 别 从 不 同 的 侧面 探讨 搜索 。 第 
一 个 故事 是 关于 搜索 本 身 ， 第 二 个 与 搜索 结果 列表 有 关 ， 而 第 三 个 则 是 

如 何 精炼 搜索 条 件 以 便 得 到 更 有 效 的 结 


当然 ， 所 有 这 些 故 事 都 是 在 讲述 如 何 创 造 各 种 积极 的 瞬间 。 它 们 会 让 用 
户 留 在 你 这 里 ， 而 不 是 跑 去 其 他 什么 网 站 。 
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提出 搜索 词 建 议 





2006 年 ，DoTheRightThing.com 2 (缩写 是 DTRT) 网 站 发 布 前 不 久 ， 
DTRT 的 创始 人 Rod Ebrahimi 和 Ryan Mickle 找到 我 ， 想 让 我 为 他 们 的 设 
计 做 一 些 可 用 性 评审 。 而 我 在 那 一 刻 一 定 感觉 自己 非常 高 尚 慷慨 ， 因 为 
一 听 到 他 们 的 主意 ， 我 就 宣布 无 需 他 们 文 付 任何 酬劳 。 简 单 来 说 ， 我 真 
的 很 欣赏 这 个 想法 ， 而 且 我 愿意 为 之 贡献 自己 的 力量 。 


Rod 和 Ryan 试图 要 为 世界 带 来 一 些 改变 。 他 们 建立 了 一 个 主页 ， 里 面 都 
是 由 用 户 自 发 创建 的 内 容 ， 全 都 是 关于 各 种 公司 或 团体 的 行为 及 举措 。 
比如 说 ， 像 Adobe 或 者 Yahoo 这 样 的 公司 如 果 有 了 什么 善举 ， 网 站 的 成 
员 就 会 发 布 文章 介绍 这 种 行为 ， 以 图 引起 公众 注意 并 且 让 其 他 公司 仿效 ， 
去 “做 正确 的 事 ” 同样 地 ， 当 某 些 公司 做 的 事 不 够 体面 ， 这 些 文章 也 能 
发 动 大 众 进行 声讨 。 网 站 成 员 也 能 为 每 一 个 故事 评分 ， 以 此 表现 出 该 事 
件 所 造成 的 社会 影响 力 。 


这 真是 个 高 尚 的 想法 ， 而 且 我 很 骄傲 自己 能 为 DTRT 出 一 辟 之 力 。 


然而 在 他 们 能 够 手动 地 球 之 前 ， 他 们 迫切 地 希望 能 找到 一 个 文 点 ， 即 要 
改变 网 站 中 最 重要 的 一 项 任务 流程 : 怎样 发 表 一 个 新 故事 。 


在 做 评审 的 3 天 时 间 里 ， 我 一 直 在 想 应 该 如 何 发 表 新 故事 ， 但 总 是 得 不 
到 一 个 令 人 满意 的 答案 。 


最 初 的 设计 版 本 是 ， 在 发 表 关 于 某 家 公司 好 的 或 者 坏 的 故事 之 前 ， 你 





















































































































































































































































































































































GD DoTheRightThing.com 这 个 网 站 的 中 文 名 称 可 以 是 “为 所 应 为 ” 或 者 说 “做 正确 的 
事 ”。 在 这 里 社会 大 众 可 以 对 一 些 公司 进行 自由 评论 。 人 们 可 以 共享 对 各 公司 的 发 
现 和 认识 ， 直 接 了 解 各 公司 动态 ， 也 能 实时 获取 并 评论 各 公司 在 社会 上 所 展现 出 的 
区 和 象 。 网 站 里 也 有 关于 中 国 的 文章 ， 例 如 “星巴克 是 否 应 该 搬出 紫禁城 ” 该 网 站 
的 网 址 为 http:Wwww.dotherightthing.com/。 一 一 译 者 注 
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必须 单 击 Companies (公司 ) 标签 ， 然 后 选择 这 家 公司 的 名 称 。 


这 个 设计 且 不 说 效率 低下 ， 它 让 人 很 难 弄 明白 到 底 该 怎样 才能 发 表 一 个 
新 故事 。 最 终 ， 你 必须 进入 该 公司 的 详情 页 面 才 能 做 这 件 事 情 。 而 当 你 
想 要 发 表 某 个 故事 时 ， 没 有 任何 理由 需要 跑 到 那个 公司 的 网 页 上 去 。 为 
了 让 这 一 过 程 一 目 了 然 ， 需 要 通过 某 种 方式 让 我 们 在 网 站 的 任何 地 方 都 
能 发 表 文 章 。 

我 建议 在 网 站 的 每 个 页 面 上 都 提供 Submit New Story (提交 新 故事 〉 按 
钮 。 然 后 在 之 后 的 页 面 中 ， 用 户 可 以 从 列表 中 选择 某 家 公司 ， 也 可 以 自 
行 输入 新 的 公司 名 ， 然 后 直接 发 表 自 己 的 故事 。 
DTRT 很 喜欢 这 个 主意 。 让 我 感到 特别 高 兴 的 是 ， 两 个 星期 之 后 他 们 给 
我 展示 了 新 的 解决 方案 ， 给 了 我 一 个 大 大 的 惊喜 ， 他 们 的 设计 比 我 预期 
的 要 好 得 多 。 
他 们 并 没有 简单 地 往 页 面 上 丢 一 个 公司 列表 ， 然 后 让 用 户 去 单 击 选择 ， 
而 是 采用 了 一 种 搜索 功能 。 更 准确 地 说 ， 是 一 种 能 够 “自动 完成 ”的 搜 
索 功 能 。 


C9.1 运用 Poka-yoke 机 制 ， 使 用 自动 完成 输入 框 
Poka-yoke ?是 一 个 日 语词 汇 ， 有 “防止 错误 ”的 意思 。 人 们 通过 这 种 
Poka-yoke 机 制 侦 测 错误 ， 或 者 防止 错误 发 生 。 

而 “自动 完成 ”的 设计 思路 就 是 Poka-yoke 预防 机 制 的 一 个 例子 。 


“上 自动 完成 ” 指 的 是 某 种 奇特 的 文本 输入 框 。 它 们 能 够 莹 试 猜测 用 户 输入 
的 文字 ， 并 且 动 态 地 搜索 出 适 配 的 结果 ， 然 后 推荐 给 用 户 ， 辅 助 他 们 完 
成 输入 。 有 些 输入 框 会 直接 在 框 内 显示 最 接近 的 那个 词 ， 还 有 些 输入 杠 
则 会 显示 一 个 适 配 的 列表 ， 用 户 可 以 在 其 中 选择 。 


这 两 种 “自动 完成 ”输入 框 都 能 避免 用 户 打 错 字 ， 从 而 确保 他 们 的 搜索 
















































































































































































































































































































































































人 Poka-yoke (本 力 习 分) 一 词 最 早出 自 于 日 本 丰田 〈Toyota) 公司 。Poka 的 意思 是 
“错误 ” Yokeru 的 意思 是 “避免 ”。 举 个 Poka-yoke 的 实例 ， 如 果 自 动 档 的 汽车 没 
有 挂 到 停车 的 P 档 ， 车 钥匙 就 无 法 拔 出 。 这 样 可 以 防止 司机 在 未 锁 死 车 轮 的 不 安全 
情况 下 离开 汽车 。 再 比如 3.5 英寸 软盘 的 右上 角形 状 有 些 特别 ， 此 举 可 以 避免 人 们 
以 错误 的 方向 插入 软盘 。 一 一 译 者 注 
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更 有 效率 。 


而 在 DTRT 这 个 案例 中 ， 这 种 输入 框 还 能 寿 
已 经 存在 于 数据 库 中 的 公司 输入 各 种 各 样 的 














Step 1: Search for a company to write about: 


Ad 





E 用 户 发 表 故 事 时 防止 他 们 为 
新 名 字 ， 如 图 9-1 所 示 。 




















Innocent Drinks 

Tesla Motors 

HMRC 

Sterling National Bank 
Sterling National Bank 

Sterling National Bank 

ePrep 

Accenture 


四 





Make Money on Google Adsense 


Adobe Systems (Macromedia, Photoshop, Flash) 四 








图 9-1 





举 个 例子 ， 如 果 想 写 一 篇 关于 Adobe Systems "的 故事 ， 那 么 用 户 输 入 
Ad 两 个 字母 后 就 会 从 数据 库 中 搜索 并 产生 一 个 列表 ， 都 是 以 这 些 字 母 












































开头 的 公司 名 。Adobe 磁 巧 是 第 一 个 ， 因 此 用 户 可 以 直接 从 列表 中 选择 

















Adobe Systems 然后 进行 下 一 步 。 如 果 Adobe Systems 没有 出 现 ， 那 么 用 
户 可 能 会 输入 他 认为 正确 的 任何 一 个 公司 名 称 〈 比 如 Adobe)， 而 结果 就 





会 导致 为 同一 家 公司 创建 多 条 数据 库 记 录 。 















































这 样 一 来 很 可 能 会 出 现 有 好 儿 个 页 面 同时 指向 一 个 公司 ， 其 中 任何 一 个 





页 面 都 无 法 包含 与 该 公司 相关 的 所 有 故事 。 





“ 目 动 完成 ”输入 框 也 能 预防 在 搜索 中 出 现 一 些 错误 。DTRT 用 户 经 常 在 
























































只 输入 儿 个 字母 的 情况 下 就 能 在 推荐 列 
对 为 拼写 错误 而 找 不 到 适 配 搜 索 结果 。 


















































的 文字 增加 而 变化 的 一 一 就 在 当前 页 面 中 
一 页 ” 然后 再 等 等 其 余 的 搜索 结果 。 


















































人 、 
另外 ， 这 种 输入 框 列 出 的 搜索 结果 也 不 会 分 页 。 因 为 搜索 结果 是 随 着 输 
入 


发 现 正确 的 公司 名 称 ， 而 不 




















。 因 此 完全 没有 必要 点 开 “ 下 








但 最 重要 的 是 大 部 分 用 户 很 欣赏 这 种 “自动 完成 ”输入 框 。 他 们 说 “ 它 














QAdobe Systems 即 我 们 常 说 的 Adobe 公司 ， 其 英文 全 称 为 “Adobe Systems Incorpo- 








rated”。 译 者 注 
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蛮 灵 的 ”而 且说 这 个 功能 让 他 们 更 加 信任 这 个 网 站 ， 因 为 开发 者 做 出 了 
相当 的 努力 让 事情 变 得 确实 简单 了 。 


“自动 完成 ”这 种 设计 方案 能 带 来 很 多 非凡 的 好 处 ， 但 它 也 同样 也 有 一 些 
局 限 性 。 


9.1.1 局 限 性 


在 Designing the Obvious 一 书 中 ， 我 曾 指出 Google Suggest" 提 供 了 一 种 
解决 方案 ， 它 模糊 了 侦 测 错误 和 防止 错误 之 间 的 界限 。 


我 们 发 现 “ 自 动 完成 ”这 一 功能 其 实 并 不 是 在 任何 情况 下 都 能 提供 帮助 。 
当 用 户 搜索 一 些小 范围 的 数据 时 ， 例 如 某 个 自行 车 零 部 件 的 目录 ， 它 会 
很 有 用 ， 但 是 对 于 在 诸如 Google Suggest 和 Yahoo Instant Search“ 这 样 的 
网 站 中 进行 广 域 搜索 的 用 户 来 说 ， 并 不 一 定 如 此 。 


换言之 ， 与 其 说 Google Suggest 教 给 了 我 们 如 何 防止 错误 ， 倒 不 如 说 它 
在 暴露 “自动 完成 ”的 局 限 性 方面 做 得 更 好 。 


首先 ， 那 些 果 着 键盘 输入 文字 的 用 户 通 常 根本 就 不 会 注意 到 推荐 列表 。 
虽然 已 经 把 一 切 都 送 到 眼前 了 ， 他 们 却 还 看 不 到 。 有 些 人 偶尔 会 在 打 完 
字 后 抬 起 头 才 发 现 推荐 列表 ， 但 是 他 们 往往 都 是 敲 了 回 车 键 后 才 抬头 ， 
所 以 根本 就 没 看 清楚 列表 里 面 是 些 什 么 。 


其 次 ， 用 户 往 往 会 因为 推荐 而 放弃 自己 先前 的 主张 ， 但 其 实 他 们 自己 想 
输入 的 文字 很 可 能 比 推荐 的 词汇 更 加 有 效 。 
比如 说 ， 某 个 希望 搜索 有 关 企 业内 网 平台 入 口 的 用 户 可 能 会 希望 输入 
designing intranet portals 这 样 的 搜索 词汇 。 但 是 如 果 在 开始 输入 时 他 注 



























































































































































































































































































































































































































































GD Google Suggest 是 Google 搜索 引擎 最 重要 的 人 性 化 服务 之 一 ， 即 在 搜索 栏 输入 框 内 
使 用 了 前 文 提 到 的 “自我 完成 ”功能 ， 使 用 户 在 输入 搜索 关键 词 时 能 及 时 调整 关键 
词 推荐 列表 ， 以 获得 最 需要 的 搜索 结果 。Goosgle 称 其 使 用 了 一 系列 广泛 的 信息 来 预 
测 用 户 的 输入 内 容 ， 例 如 通过 各 种 搜索 请 求 的 流行 度 来 确定 这 些 预 测 推荐 请 求 的 排 
列 顺序 等 。 该 功能 曾 被 国外 用 户 评 为 2006 年 Google 最 出 色 的 新 特性 之 一 。 网 址 为 
http://www.google.com/webhp?complete=]1 &hl=en。 译 者 注 

@) Yahoo Instant Search 和 Google Suggest 非常 类 似 ， 在 用 户 开始 输入 关键 词 的 同时 开 

台 搜索 相 适 配 的 信息 。 不 过 它 显 示 的 并 不 是 关键 词 推 荐 列表 ， 而 是 在 辨识 出 用 户 输 

入 的 关键 词 用 意 后 出 现 一 个 悬浮 窗口 ， 显 示 相 关 问 题 的 答案 。 网 址 为 http://search. 

yahoo.com/instant。 一 一 译 者 注 
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意 到 了 那些 推荐 的 搜索 词汇 ， 于 是 就 可 能 会 转 而 选择 其 中 的 designing 
intranets， 如 图 9-2 所 示 。 











rr Advanced Saarch 
designing intra Preferences 


designing intranet 1,800,000 results| Language Tools 
designing intranets 40,000,000 results 
close 











图 9-2 


之 所 以 会 出 现 这 种 情况 ， 可 能 是 由 于 用 户 认为 系统 推荐 的 词汇 将 会 产生 更 
有 效 的 结果 ， 也 有 可 能 他 们 认为 这 些 搜索 词汇 是 搜索 引擎 开发 者 希望 他 们 
使 用 的 词汇 。 


第 二 个 理由 其 实 毫 无 道理 。 可 能 你 我 都 知道 ， 但 还 是 有 很 多 人 一 直 都 是 
这 样 思考 的 。 他 们 认为 当 自 己 被 要 求 或 者 至 少 是 被 引导 去 做 什么 的 时 
候 ， 提 出 该 要 求 的 网 站 肯定 比 他 们 自己 聪明 ， 因 此 他 们 就 应 该 服从 。 


无 论 如 何 ， 在 进行 没有 固定 范围 的 广 域 搜索 时 ,“ 上 自动 完成 ”功能 可 能 会 
诱导 用 户 放弃 自己 本 来 正确 的 想法 ， 而 去 选用 网 站 推荐 的 ， 但 其 实效 率 
较 低 的 搜索 词汇 。 


第 三 ， 你 必须 时 刻 注意 不 要 让 推荐 “ 抢 跑 ”得 太 快 。 


在 Yahoo Instant Search 中 输入 des 会 出 现 Wisdom Tree ?当前 财务 数据 。 
而 在 Google Suggest 里 面 做 同样 的 事情 ， 最 优先 的 选项 则 是 Desperate 
Housewives2。 但 很 可 能 我 们 想 输入 的 单词 其 实 是 Design。 很 明显 ， 仅 仅 
只 有 单词 的 头 3 个 字母 ， 不 管 是 Yahoo 还 是 Google 都 不 足以 马上 确定 用 
户 所 寻找 的 信息 到 底 是 什么 。 见 图 9-3。 























































































































四 Wisdom Tree (DES) 是 一 家 投资 顾问 公司 ， 它 主持 开办 了 一 个 以 货币 兑换 交易 为 
基础 的 小 型 红利 基金 。 与 上 文 有 联系 的 具体 网 址 为 http://www.wisdomtree.com/etfs/ 

fund-details.asp?etfid=15。 译 者 注 
@) Desperate Housewives 是 指 美剧 “绝望 主妇 ”。 一 一 译 者 注 
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图 9-3 











在 输入 的 字符 数 足 以 让 推荐 词 有 意义 之 前 ， 
另 一 方面 来 说 ， 目 前 也 没有 一 个 魔法 数 
时 候 显示 推荐 词 。 因 此 我 们 
最 后 ， 同 Ajax 和 DHTML 了 
方面 也 存在 问题 。 








xz 各 已 


子 乳 























暂且 把 这 个 界限 定 为 3 一 4 个 
于 发 的 任何 东西 一 





请 不 要 显示 推荐 词 。 当 然 从 
确切 地 规定 到 底 应 该 在 什么 


一 一 


字符 。 
样 ,“ 自动 完成 ”在 易 








日 
/ 
































众所周知 ， 屏 幕 阅读 器 是 按照 从 
在 页 面 载 入 完毕 之 后 “ 变 ”出 来 的 任何 东西 

















上 F 上 到 下 的 顺序 读 取 已 载 入 页 再 





i 的 。 因 此， 
， 都 需要 通知 屏幕 阅读 器 页 




















硬 发 生 了 什么 改变 ， 并 且 在 页 面 的 这 一 部 分 
些 部 分 将 无 法 被 视力 有 障碍 的 用 户 “ 阅 读 ”。 
9.1.2 ”好 雨 知 时 节 


抛 开 这 些 局 限 性 ， 我 们 能 通过 “自动 完成 ” 
地 获得 信息 ， 避 免 他 们 在 搜索 过 程 中 出 现 失 









































了 | 
各 














给 它 一 个 快速 入 口 ， 和 否则 这 


上 








来 帮助 大 部 分 用 户 更 加 快速 
误 ， 防 止 为 同一 个 数据 创建 








多 个 数据 库 条 目 。 同 时 它 还 能 让 你 在 用 户 搜 








寻 出 信息 的 瞬间 得 到 他 们 的 





赞赏 和 感激 。 








对 于 DoTheRightThing 网 站 来 说 ,，“ 自动 完成 ”是 


它 改 变 了 之 前 麻烦 笨拙 的 故事 发 表 步 又 ， 加 
有 效 。 从 这 一 点 上 来 说 ， 他 们 的 确 是 在 “做 














个 完美 的 解决 方案 。 
快 了 该 流程 的 速度 并 且 更 为 
E 确 的 事 ” 
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在 因特网 上 使 用 搜索 引擎 时 ， 只 需要 输入 关键 词 ， 单 击 Search〈 搜 索 ) 
按钮 之 后 ， 我 们 通常 得 在 海量 的 搜索 结果 中 努力 找寻 我 们 需要 的 信息 。 
这 个 行为 已 经 变 得 很 常见 ， 尤 其 是 如 今 人 们 每 天 绝 大 部 分 的 网 络 体验 都 
是 从 Google.com 开始 的 。 


我 们 去 Google 搜索 并 找到 某 个 相关 链接 ， 然 后 单 击 它 。 
时 ， 我 们 再 回 到 Google。 


这 样 一 来 ，Google 几乎 变 成 了 很 多 人 一 种 根深 蒂 固 的 习惯 ， 哪 怕 是 互联 
网 新 手 也 是 如 此 。 他 们 极其 虔诚 把 自己 的 浏览 器 主页 设置 为 那个 传奇 
最 精简 的 网 页 ， 并 将 其 作为 万 事 的 开始 。 他 们 从 那里 出 发 去 学 习 新 事物 、 
购物 ， 甚 至 是 前 往 某 个 熟知 的 域名 网 站 《是 的 ， 很 多 人 甚至 可 能 包括 你 
都 是 先 在 Google 搜索 栏 内 输入 某 个 域名 的 URL， 然 后 再 单 击 第 一 个 搜索 
结果 进入 那个 网 站 )。 
上 述 的 事实 有 次 给 我 带 来 了 一 些 肪 烦 ， 当 时 我 正在 协助 某 个 论坛 开发 。 
意识 到 如 果 设 计 得 很 差劲 ， 哪 怕 是 简单 如 一 个 搜索 结果 的 分 页 系统 ， 
也 会 让 用 户 痛 至 不 已 。 在 为 该 论坛 协作 开发 几 周 后 ， 我 拿 到 了 搜索 结果 
页 的 设计 稿 。 


而 这 个 分 页 系统 的 界面 ， 唔 ， 不 是 很 好 ， 如 图 10-1 所 示 。 
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需要 其 他 信息 








































































































































































































Page: 12345.. 喇 Pp 


图 10-1 


首先 ， 当 前 页 面 Page 1 的 链接 是 可 以 点 击 的 ， 但 它 没 必要 如 此 。 毕 竞 用 
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户 已 经 在 这 个 页 面 上 了 ， 对 吧 ? 











其 次 ， 在 这 个 设计 中 没有 指示 能 表明 用 户 当 前 在 哪个 页 面 。 没 有 让 当前 页 
面 的 数字 凸显 出 来 ， 事 实 上 它 看 上 去 和 所 有 其 他 的 页 面 链接 都 是 一 样 的 。 


与 此 同时 ，Pagel 中 的 左 箭头 也 无 意义 ， 因 为 在 搜索 结果 的 第 一 页 我 












































们 无 法 回 退 到 任何 地 方 。 现 在 的 情况 是 存在 两 个 箭头 : 向 右 的 可 以 点 击 ， 








向 左 的 却 不 可 以 。 
































该 部 分 的 标签 Page 也 很 没 必 要 。 它 放 在 那里 虽然 3 











得 有 点 轧 盔 ， 因 为 它 并 没有 显示 当前 页 数 。 




































































那些 数学 的 链接 太 小 了 。 它 们 显示 的 是 正文 字体 大 小 ， 但 由 于 每 个 链接 
只 包含 一 个 字符 ， 因 此 用 户 很 难 把 鼠标 准确 地 移动 到 上 面 并 单 击 。 


最 后 ， 这 个 分 页 系统 放 在 了 搜索 结果 列表 的 右上 角 。 这 一 点 打破 了 包括 





没什么 坏处 ， 但 却 显 


























Google、MSN、Yahoo 等 几乎 所 有 的 主流 搜索 站 点 设 定 的 惯例 。 























我 现在 常常 鼓励 人 们 挑战 标准 ， 然 而 至 关 重 要 的 一 点 是 ， 在 准备 挑战 标准 
时 请 确保 你 的 目标 是 为 了 改进 它们 。 如 果 你 的 新 设计 并 没有 做 到 改进 ， 那 









































么 你 的 用 户 将 不 仅 得 不 到 任何 好 处 ， 反 而 有 可 能 失去 更 多 。 因 为 他 们 无 法 


























利用 在 其 他 网 站 获得 的 经 验 ， 所 以 不 能 很 快 地 理解 如 何 使 用 你 的 网 站 。 
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很 多 时 候 ， 有 些 事 物 优秀 到 足以 被 普遍 接受 ， 好 像 它 本 身 就 是 某 种 标准 。 


























于 这 类 情况 。 见 图 10-2。 


只 要 背离 了 它 ， 那 就 一 定 是 不 好 的 。 也 许 该 感谢 Google， 分 页 系统 也 属 





| Cooooooooooog le 
Next 


Previous1 234567891011 








图 10-2 








Google 的 分 页 系统 非常 容易 辨识 ， 不 仅仅 是 因为 它 被 Google 使 用 ， 还 因 














为 它 被 无 数 其 他 网 站 所 借鉴 ， 其 中 包括 各 种 主流 搜索 站 点 。 











不 管 是 在 哪个 网 站 ， 分 页 系统 彼此 都 很 相似 。 每 个 分 页 系统 都 有 一 个 
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Previous (上 一 页 ) 链接 、 一 个 Next( 下 一 页 ) 链接 ， 两 者 当中 还 有 一 系 
列 数字 。 而 且 绝 大 多 数 分 页 系统 都 会 通过 某 种 方式 让 当前 页 码 的 数字 有 
别 于 其 他 链接 。 


抱 着 这 种 想法 ， 我 开始 尝试 为 这 个 论坛 的 分 页 系统 做 一 些 改 变 。 


首先 ， 我 去 掉 了 Page 标签 ， 把 左 箭头 设置 为 不 可 用 状态 ， 然 后 把 两 个 箭 
关 分 曾 放 在 那 串 外 码 链接 的 两 端 。 这 样 做 是 为 了 让 界面 在 一 开始 就 给 人 
选择 : 只 要 愿意 ， 他 们 可 以 很 快 地 回 退 到 之 前 的 页 面 。 同 时 为 了 一 致 性 ， 
我 也 修改 了 箭头 的 颜色 ， 使 之 和 链接 的 颜色 相配 套 。 见 图 10-3。 


12345.., > | 


图 10-3 


然后 ， 我 将 文字 的 字体 加 大 了 一 点 点 ， 并 且 改 变 了 当前 页 码 的 文字 样式 ， 
使 它 从 其 他 数字 链接 中 凸显 oe 0 把 它 的 
颜色 改 为 红色 ， 并 且 加 大 了 字号 。 同 时 也 增 大 了 第 头 的 大 小 ， 让 界面 中 
每 一 个 元 素 都 能 更 容易 被 点 击 。 见 图 10-4。 


大 12345678910 > | 


图 10-4 


最 后 ， 我 添加 了 Previous 和 Next 的 文字 链接 ， 把 它们 放 在 相对 应 的 箭头 
旁边 。 单 纯 从 技术 上 来 说 ， 在 大 部 分 情况 下 这 些 文字 链接 都 是 不 必要 的 ， 
因为 箭头 足以 完成 任务 。 但 是 ， 文 字 链 接 增 大 了 这 两 个 最 为 常用 的 链接 
的 响应 区 域 ， 使 得 点 击 更 为 容易 。 记 住 ， 界 面 越 简 单 ， 交 互 的 瞬间 就 越 
美好 。 见 图 10-5。 
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图 10-5 
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噢 ， 当 然 我 还 把 整个 分 页 系统 从 结果 列表 页 的 右上 角 移 到 了 下 方正 中 。 


这 样 它 就 更 容易 满足 用 户 的 预期 ， 也 更 容易 让 用 户 找到 。 


第 10 章 列 出 搜索 结果 

































































在 这 个 案例 中 ， 我 遵循 了 标准 。 设 计 或 者 说 寻找 合适 的 分 页 系统 变 得 不 
再 那么 困难 。 诸 如 Google 等 已 经 为 分 页 制定 了 一 个 非常 流行 的 设计 方 
而 且 也 都 以 非常 近似 的 手段 应 用 这 些 分 页 系统 。 与 此 同时 ， 这 个 标 


式 ， 
准 化 的 解决 方案 对 


战 标准 、 冒 险 人 破坏 用 户 期 望 ， 倒 不 如 遵循 它们 ， 效 果 反 而 会 更 好 。 















































哪怕 是 新 手 来 说 也 相当 好 用 。 很 多 情况 下 ， 与 其 挑 











提供 回 到 搜索 结果 列表 的 出 口 
在 我 们 继续 之 前 ， 关 于 搜索 结果 页 面 还 有 一 件 事情 需要 讨论 一 下 。 
有 了 时候， 我 从 一 些 网 站 的 搜索 结果 列表 单 击 进入 某 个 页 面 ， 然 后 在 希望 


回 退 到 之 前 的 结果 列表 时 ， 却 发 现 该 页 面 中 没有 这 个 入 口 。 



























































当 这 种 情况 发 生 时 ， 用 户 要 么 依靠 万 能 的 浏览 器 Back (后退 〉 按钮 ， 要 
么 直接 从 这 个 结果 页 开始 新 一 轮 的 搜索 。 但 碰巧 我 属于 坚信 用 户 不 应 该 
依赖 Back 按钮 的 那 一 类 人 。 网 站 自身 应 当 始终 为 用 户 提供 导向 ， 方 便 他 
们 在 站 点 中 来 入 自如， 而 不 是 依靠 浏览 器 工具 。 


因此 ， 我 经 常 在 自己 的 设计 中 加 入 一 些 东西 ， 从 而 能 够 明确 地 达到 这 一 
目的 。 它 们 看 上 去 很 像 Gmail "里 面 所 提供 的 那样 ， 例 如 图 10-6。 


当 Gmail 的 用 户 为 
都 指派 一 个 标签 ， 
导航 的 工具 条 中 )， 
Gmail 为 他 们 


人 


在 


讯 国 。] 


















































Remove label "Newsletters” ) Report Spam )Y Delete ) 


图 10-6 


























邮件 设置 了 某 个 标签 (你 能 为 Gmail 中 的 每 一 封 邮件 
类 似 文件 夹 那 样 便于 归档 整理 。 这 些 标签 被 列 在 边 


















































六 








昌 单 击 进 入 该 标签 下 的 某 封 邮件 进行 阅读 时 ， 











提供 了 一 个 Back to( 回 到 ) 的 链接 。 


图 10-6 中 ， 这 个 链接 让 我 能 Back to“Newsletters”( 回 到 “时 事 通 
E 如 你 所 猜 到 的 ，Newsletters (时 事 通 讯 ) 是 我 创建 的 一 个 标 








众所周知 ，Gmail 是 Google 提供 的 免费 电子 邮箱 ， 网 址 为 http://www.gmail.com。 
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签 ， 里 面 放 的 全 都 是 我 订阅 的 该 类 邮件 。 如 果 没 有 Back to 链接 ， 我 想 
回 到 Newsletters 标签 内 容 列 表 的 唯一 方法 只 能 是 先 在 左 侧 工具 栏 中 找到 
Newsletters 一 词 ， 然 后 单 击 它 。 


最 好 的 情况 下 ， 这 让 人 感觉 效率 低下 。 而 最 坏 的 情况 ， 很 可 能 我 没有 想 
到 这 个 办 法 ， 而 是 人 碰巧 单 击 了 另外 什么 东西 ， 最 后 完全 迷失 了 方 问 。 


设计 搜索 结果 页 面 时 ， 请 考虑 在 其 中 加 上 类 似 上 文 所 提 到 的 东西 。 例 如 ， 
Home (首页 ) 一 Search results〈 搜 索 结果 列表 ) 一 Product page《〈 产 品 
页 面 )。 


我 的 设计 ( 线 框图 形态 ) 看 上 去 如 图 10-7 所 示 。 
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Book title 
Book subtitle Add to Cart 
Read it now | | 
oe Publisher: Publisher Name See allinthis category | 
TO Released: October, 2005 "8 


Author: Joe Smith 
Contributors: Anderson, David F. 





Pages: 267 





图 10-7 


























这 个 背景 颜色 突出 的 简单 Back to Search Results〈 回 到 搜索 结果 列表 ) 链 
接 ， 为 用 户 提供 了 一 个 出 口 。 用 户 有 了 可 依靠 的 文 撑 点 ， 从 而 不 需要 求 
助 浏览 器 工具 。 


好 的 网 站 设计 应 该 能 够 通过 我 说 的 “无 浏览 器 自 测试 ”的 检验 。 这 种 测 
试 抛 开 浏览 器 以 及 站 点 导航 提供 的 工具 栏 、 收 藏 夹 等 一 切 功能 ， 据 弃 任 
可 援助 ， 而 只 依靠 网 站 本 身 来 引导 用 户 。 如 果 你 的 站 点 通过 了 这 一 测试 ， 
那么 今天 可 以 告 一 段落 了 ， 去 吃 个 三 明治 吧 ! 


Back to 链接 和 分 页 系统 是 非常 基础 的 设计 ， 但 如 果 做 得 不 好 ， 它 们 就 会 
成 为 适 成 用 户 挫折 感 的 关键 因素 。 当 人 磁 到 类 似 这 样 应 用 极为 广泛 的 设计 
时 ， 最 好 遵循 普 吉 的 标准 ， 帮 助 用 户 达 到 他 们 的 目的 ， 而 不 要 迫使 他 们 
学 习 任何 新 的 东西 
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绝 





在 各 个 网 站 上 ， 绝 大 多 数 人 只 是 依靠 那个 后 面 带 有 “搜索 ”按钮 的 输入 














由. 





























框 来 进行 搜索 。 因 为 这 种 途径 最 为 简 最 好 辨认 。 而 当 需 要 对 他 
们 的 搜索 加 以 更 多 控制 的 时 候 ， 那 些 网 站 通常 也 会 提供 一 个 Advanced 








高 级 搜索 ) 的 选项 以 便 满 足 需 求 。 


然而 ， 到 底 需 要 有 多 Advanced (高 级 ) 呢 ? 或 者 更 准确 地 说 ， 那 些 高 级 
的 选项 应 该 复杂 到 什么 程度 ， 才 能 让 用 户 找到 自己 所 需要 的 东西 ? 


，Advanced Search 就 是 能 塞 满 整 个 屏幕 的 一 堆 选 项 ， 很 快 就 让 
你 难以 忍受 。 比 如 ， 图 11-1 中 Google 的 Advanced Search 页 面 "。 


Search ( 























本 Qt gl » Advanced Search Advanced Search Tips | About Google 
Wha with all of the words [aoresuks $$] (‘Google Search ) 
with the exact phrase 
with at least one of the words 
without the words 
Language Return pages written in [fany language 
File Format [Gnty_ +) retum results of the file format [anyformat $ 
Date Return web pages first seen in the [anytime 3 
Numeric Range Retum web pages containing numbers between and 














Occurrences Return results where my terms occur [anywherein the page $] 
Domain [Gnly_$) retum results from the site or domain 
le.com, .org More info 
Usage Rights Return results that are ee 
SafeSearch © Nofiltering OQ Filter using SafeSearch 
Page-Specific Search 
一 1( ) 
Similar Find pages similar to the page ER 
www.google.com/help.html 
Links Find pages that link to the page Search ) 



























































图 11-1 
GD Google 的 Advanced Search 页 面 现在 已 经 不 是 作者 截屏 的 那个 界面 了 ， 已 经 进行 了 
大 幅度 的 简化 。 网 址 为 http://www.google.com/advanced_search?hl=en。 一 一 译 者 注 
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然而 ， 在 大 多 数 情 况 下 ， 这 利 
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高 密度 的 选项 其 实 并 没 必 要 。 尽 管 那些 更 











有 经 验 的 用 户 ， 或 者 有 着 非常 精确 需求 的 用 户 可 能 偶尔 会 冒险 使 用 这 些 











四 二 


高 级 选项 ， 但 它们 通常 





可 以 ) 



































一 种 更 为 简便 的 界面 展现 出 来 。 




















下 面 是 我 近期 做 的 一 个 项 目 ， 当 时 正在 为 某 个 数字 下 载 公 司 的 产品 目录 
做 再 设计 。 网 站 的 快捷 搜索 ， 就 像 其 名 称 那 样 ， 确 实 足够 简单 ， 只 是 一 
个 输入 框 和 一 个 Search 搜索) 按钮， 但 是 他 们 的 高 级 搜索 就 完全 变 成 


男 一 种 形态 了 。 








上 看 到 的 就 是 如 图 11-2 所 示 的 这 个 界面 。 





























Search content 
Search in: Text 
and in: Subject 
and in: Publication years 
and in: License type 
and in: Document type 

















不 论 何 时 ， 当 用 户 单 击 Advanced Search 链接 后 ， 在 屏幕 









































"interface design' 鸭 
"web design" [Ea 
From: [2006 | To: [2008 | [Eq 
All license types 加 
Al document types [Eq 
"interface" [Ea 














图 11-2 

















这 个 Advanced Search 页 面 并 不 像 Google 的 那样 复杂 ， 但 是 仍然 有 一 些 
地 方 可 以 充分 地 改进 。 


该 版 本 的 设计 者 可 能 认为 ， 如 果 把 所 有 的 选项 立刻 展现 H 














统 观 全 局 ， 并 





























会 在 用 户头 上 形成 那 种 讨厌 的 卡通 思维 泡 泡 : 






































上 1 来， 用 户 就 能 





且 只 编辑 自己 需要 的 那儿 个 选项 即 可 。 但 是 这 种 方法 通常 


“我 需要 填 完 所 有 这 些 玩意 吗 ? 如 果 我 只 填写 了 一 部 分 ， 会 发 生 什 么 ?” 














随 着 更 为 仔细 

















的 检查 ， 








的 X 图 标 。 | 














当然 ， 还 有 : 








昌 户 可 能 会 注意 到 那些 用 来 类 


























j 这 些 又 会 触发 另 
“这 些 图 标 是 说 我 必须 从 表单 
移 除 的 太 多 了 怎么 办 ? 还 有 ， 如 果 我 改变 主意 了 ， 示 
做 ? 我 是 否 必须 单 击 Start Over (重新 用 


作 泡 泡 : 



































移 除 不 需要 的 选项 才能 正常 工作 吗 ? 那 我 
上 回来 ， 该 怎样 
F 始 )， 然 后 ， 再 全 部 从 头 再 来 ? ” 
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川 除 表单 








限 再 力 


P 茶 行 选项 
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“如 果 我 的 这 次 搜索 是 这 样 设置 的 ， 那 以 后 怎样 才能 够 再 次 使 用 同样 的 设 
置 ? 2 


要 想 清除 所 有 这 些 问 题 泡 泡 ， 只 需要 把 这 个 表单 整理 一 下 即 可 。 
EE 
已 



































C11.1 高 级 搜索 也 简 ; 


首先 ， 我 决定 保留 默认 的 Quick Search 〈 人 快捷 搜索 ) 选项 ， 因 为 它 放 在 那 
里 非常 合适 ， 非 常 有 用 ， 也 非常 便于 使 用 。 大 多 数 用 户 想 要 开始 搜索 时 
都 会 从 这 里 开始 。 而 且 它 表现 的 方式 非常 标准 ， 因 此 我 找 不 到 什么 理由 
来 改变 它 。 见 图 11-3。 











人 ] Advanced 
eam | se) Me 








图 11-3 

为 了 在 新 的 设计 方案 中 稍微 提 点 速 ， 同 时 让 表单 更 有 效 、 更 容易 理解 ， 
我 希望 能 避免 像 现在 这 样 把 用 户 送 到 一 个 新 页 面 下 ， 然 后 让 他 们 填写 一 
个 复杂 的 表单 。 

我 在 这 里 使 用 了 “行内 扩展 ”的 方式 。 新 的 元 素 将 会 任 空 “ 掉 落 ”到 网 
页 中 ， 然 后 把 其 他 的 内 容 往 页 面 下 方 推 开 。 推 开 后 ， 就 如 图 11-4 所 示 。 
















































































































































































Er |]Eee 让 is 

Search content 
Searchin: [TBxt for [nterface design” 四 办 
and in: Subject for: “web design” 四 
and in: Publication years 百 for: From:|2006 | To:|2008 办 
andin: [Ucense ype for: [Alllicense types 四 
and in: Document type for: All document types $ 四 
for [interface” | 国 


























图 11-4 
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通过 这 种 方式 ， 用 户 单 击 Advanced 链接 后 新 的 表单 将 会 如 戏法 般 地 出 现 
在 当前 页 面 ， 而 不 需要 等 待 载 入 新 的 网 页 。 

足够 简单 。 但 真正 的 问题 并 不 是 页 面 载 入 的 时 间 ， 而 是 那个 丑陋 的 表单 。 
11.1.1 递 进 显示 

绝 大 多 数 人 都 不 愿 费 事 去 逐 行 逐 项 地 编辑 这 个 表单 。 而 在 可 能 会 填写 这 
个 表单 的 少数 人 当中 ， 也 只 有 更 少 的 人 会 每 次 都 这 么 和 干 。 通 常 来 说 ， 那 
些 确实 需要 高 级 搜索 选项 的 人 其 实 只 需要 很 少 的 选项 。 

换 句 话说 ， 人 类 的 行为 模式 告诉 我 们 ， 没 有 必要 一 次 就 把 所 有 的 选项 都 
摆 出 来 。 我 们 真正 需要 的 是 一 个 简单 而 又 能 够 广泛 应 用 的 解决 办 法 ， 最 
好 能 只 在 必要 时 才 增 加 选项 。 

这 种 时 候 Progressive disclosure 〈 递 进 显 示 ) 就 是 我 们 要 找 的 完美 解决 
方案 。 

简单 来 说 ， 所 谓 的 “ 递 进 显示 ” “就 是 一 种 设计 方法 ， 它 能 根据 实际 需要 
〈 即 依靠 用 户 的 输入 ) 而 逐步 显示 控件 ， 而 不 是 默认 把 它们 一 股 脑 全 堆 在 
眼前 。 

对 话 框 通常 能 体现 出 递 进 显示 的 概念 。 比 如 说 ， 单 击 Advanced Options 
(高 级 选项 ) 链接 可 能 会 弹出 对 话 框 ， 里 面 能 够 展示 更 多 的 选项 。 这 些 选 
项 在 默认 情况 下 是 隐藏 的 ， 而 上 只 有 当 用 户 确 实 单 击 了 某 个 链接 让 它们 出 
现时 ， 它 们 才 会 出 现 。 

为 了 让 这 个 想法 应 用 到 Advanced Search 表单 中 ， 我 用 1 行 单独 的 控件 
替换 了 原 有 的 6 行 控 件 ， 并 且 在 后 面 加 上 了 一 个 增加 控件 的 按钮 ， 如 图 
11-5 所 示 。 

通过 这 种 方式 ， 用 户 能 够 在 需要 的 时 候 ， 只 需 一 次 增加 一 行 。 他 们 绝 不 
会 因为 突然 出 现 一 大 推选 项 而 难以 忍受 。 
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中 本 书 作 者 有 一 篇 专门 讨论 “ 递 进 显示 ”方法 的 文章 ，2007 年 9 月 发 表 于 Vitamin 网 
站 ， 题 目 是 “Read more*…… 关于 递 进 显 示 方 法 ”。 网 址 为 http:Wwww.thinkvitamin. 
译 者 注 
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com/ features/design/read-more-about-progressive-disclosure。 
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图 11-5 


同时 我 也 去 掉 了 Start Over 按钮 。 为 什么 ” 想 一 想 ， 你 最 后 一 次 目睹 有 人 
点 击 这 种 选项 是 在 什么 时 候 ? 绝 大 部 分 时 候 用 户 不 想 全 部 从 头 来 过 。 他 
们 只 希望 修改 部 分 内 容 ， 这 样 就 行 了 。 所 以 ， 送 它 上 路 吧 。 


(顺便 说 一 句 ， 对 于 其 他 类 型 的 网 页 表单 来 说 ， 这 种 做 法 也 是 正确 的 。 我 
们 常常 看 到 的 Clear Form 〈 重 置 ) 选项 其 实 一 点 用 都 没有 。) 


11.1.2 引人入胜 的 交互 

我 留 下 的 1 行 是 用 户 已 经 在 Quick Search 中 输入 过 的 内 容 。 在 图 11-6 
中 ， 选 项 表示 搜索 所 有 文本 中 带 有 aviation (航空 学 ) 关键 词 的 内 容 。 但 
很 明显 ， 单 击 了 Advanced Search 的 用 户 希 望 在 他 已 经 做 完 的 基础 上 进 一 
步 地 精炼 搜索 。 为 了 改进 这 一 点 ， 我 在 它 下 方 又 加 上 了 一 行 有 待 输入 的 
选项 。 
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( Search ) funsanew search using these advanced options. 





图 11-6 
这 种 方式 告诉 了 用 户 如 何 为 搜索 增加 条 件 。 而 且 在 理论 上 ， 它 有 可 能 会 
诱 使 他 们 自己 去 增加 选项 。 


唯一 的 问题 是 那个 Quick Search 仍然 是 激活 的 ， 而 同时 存在 两 个 外 观 彼 
此 不 同 的 Search 按钮 可 能 会 混淆 视听 。 
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最 简单 的 解决 办 法 就 是 让 Quick Search 失效 (图 11-7 顶部 的 Search 按 
钮 )。 


aviaton Hide advanced options 
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全 Search 9 Runs a new search using these advanced options. 








图 11-7 


而 同时 我 把 之 前 的 Advanced 链接 改 成 了 Hide advanced options (隐藏 高 
级 选项 )。 这 样 用 户 就 能 知道 如 何 取消 交互 ， 然 后 回 到 Quick Search 中 
去 。 

“ 递 进 显示 ”是 一 个 简单 的 概念 ， 而 且 它 能 以 各 种 方式 适用 于 绝 大 部 分 的 
Web 应 用 。 在 这 里 我 们 用 它 来 简化 高 级 搜索 表单 ， 但 在 其 他 地 方 它 还 能 
用 来 隐藏 各 种 高 级 功能 ， 甚 至 还 能 为 那些 少见 的 配置 选项 提供 一 个 容易 
辨识 的 入 口 。 
此 外 ， 如 果 你 的 老板 有 一 大 扒 差 劲 的 主意 ， 而 又 要 求 你 必须 实现 出 来 ， 
那么 你 也 可 以 运用 “ 递 进 显示 ”的 方法 来 隐藏 其 中 的 内 容 。 


只 要 别 告诉 他 是 我 说 的 就 行 。 
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假设 我 们 的 网 站 已 经 为 用 户 提供 了 充分 的 导向 ， 那 么 现在 是 帮助 他 们 座 
人 去 学 习 更 多 东西 的 时 候 了 。 比 如 注册 账号 ， 以 及 开始 真正 的 应 用 。 


每 一 处 交互 其 实 都 是 一 个 为 用 户 创 造 流畅 、 愉 悦 瞬 间 的 机 会 。 


我 们 可 以 提供 Screencast 或 者 其 他 界面 友好 的 演示 视频 来 帮助 用 户 更 容易 
地 了 解 某 项 服务 或 菜 个 应 用 程序 (正如 第 8 章 所 描述 的 那样 )。 我 们 也 同 
样 需 要 把 这 种 交互 行为 本 身 设计 得 让 用 户 再 一 次 地 感到 自己 有 成 效 、 聪 
蔗 而 且 备 受 苯 重 。 然 而 ， 互 联网 上 关于 视频 方面 却 又 没有 一 个 能 让 人 依 
葫芦 画 标 的 公认 标准 。 考 虑 到 这 些 ， 本 部 分 第 一 个 故事 讲述 了 如 何 设计 
一 个 能 在 各 种 情况 下 都 通用 的 视频 播放 占 。 


一 旦 我 们 说 服 某 位 用 户 注册 之 后 ， 他 就 会 发 现 自己 面 对 着 一 个 填写 资料 
的 过 程 。 而 网 站 的 表单 又 总 是 充满 着 各 种 潜藏 的 错误 ， 哪 怕 连 最 简单 的 
表单 也 可 能 会 导致 混淆 。 绝 大 多 数 表 单 都 只 是 使 用 默认 的 HTML 控件 ， 
然后 就 有 失 考 虑 地 扔 到 界面 中 去 。 成 千 上 万 的 表单 几乎 都 一 模 一 样 ， 它 
们 没有 反馈 机 制 ， 没 有 即时 校 验 ， 也 之 不 考虑 是 否 能 支持 用 户 的 思维 横 
式 。 


尽管 每 开始 设计 一 个 新 的 表单 时 ， 我 总 是 认为 只 是 再 寻常 不 过 的 又 一 个 
表单 而 已 ， 但 实际 上 在 每 次 结束 时 我 总 会 很 享受 。 因 为 即使 是 一 个 简单 
的 注册 表单 也 同样 会 有 需求 和 约束 ， 以 及 各 种 挑战 。 每 一 个 表单 在 设计 
出 来 后 都 会 和 以 往 的 有 些 不 同 。 


我 留意 过 很 多 人 使 用 过 很 多 表单 ， 而 且 了 解 到 什么 样 的 表单 会 让 人 觉得 
沉闷 无 聊 ， 又 是 什么 样 的 表单 让 人 用 起 来 不 会 感到 丝毫 痛苦 ， 甚 至 会 成 
为 愉悦 的 享受 。 

正 因 为 如 此 ， 我 会 向 你 们 讲述 几 个 关于 设计 表单 的 故事 ， 从 最 简单 的 说 
到 最 复杂 的 。 这 些 故 事 针 对 的 内 容 包 括 表单 排版 、 即 时 校 验 、 分 步 拆 分 
长 表单 、 标 签 、 找 回 密码 ， 甚 至 还 包括 表单 间 相 互 控制 条 件 。 

如 果 运 气 好 ， 你 们 将 会 开始 用 一 种 全 新 的 眼光 来 看 竺 表单， 并 且 意 识 到 
它们 对 用 户 体验 将 造成 难以 置信 的 影响 。 

不 过 首先 ， 证 我 们 还 是 看 一 眼 如 何 改 进 视频 播放 噩 来 帮助 用 户 在 互联 网 
上 操作 视频 文件 。 
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我 们 对 于 通过 互联 网 操作 视频 文件 早已 司空 见 惯 。 开 发 者 只 需要 创建 一 
个 用 于 播放 控制 视频 文件 的 界面 ， 然 后 就 能 把 各 种 视频 注入 到 播放 器 里 
面 去 。 但 出 于 茶 些 原因 ， 各 种 在 线 视频 播放 器 相互 之 间 和 世界 上 其 他 万 
物 一 样 干 差 万 别 。 


YouTube、Yahoo、CNN、NYTimes 等 网 站 都 有 很 不 错 的 播放 器 ， 其 设计 
几乎 轻易 就 能 成 为 业界 标准 。 但 是 大 多 数 开 发 者 似乎 并 不 爱 从 主流 站 点 
吸取 经 验 ， 也 不 愿 自 己 的 网 站 受 其 影响 。 当 然 ， 仍 有 一 些 主流 网 站 似乎 
正在 相互 学 习 ， 逐 步 趋 近 于 找到 一 种 更 为 标准 的 方法 来 规范 视频 操作 。 
而 这 正 是 我 们 现在 所 要 探讨 的 地 方 。 我 们 将 看 看 网 上 那些 最 经 常 使 用 的 
播放 器 是 如 何 设 计 的 ， 并 以 此 党 试 创 造 出 一 种 博 采 众 家 之 长 、 在 绝 大 部 
分 情况 下 都 能 顺利 运作 的 播放 器 。 
尽管 我 曾经 是 一 个 Adobe 的 Flash 开发 人 员 ， 但 并 没有 什么 客户 请 我 设 
计 视 频 播放 器 。 所 以 我 纯粹 只 是 为 了 好 玩 而 设计 了 一 款 。 我 相信 它 在 各 
种 网 站 和 应 用 程序 中 都 能 完美 运作 。 


通过 这 个 例子 我 希望 告诉 你 们 ， 对 那些 已 经 重复 百 万 这 的 
和 改进 是 件 多 么 简单 的 事情 。 


C12.1 拨 开 VCR 设计 的 迷雾 


要 想 改进 视频 播放 锅 ， 你 必须 先 透 彻 地 了 解 现 有 播放 需 的 设计 。 因 此 让 
我 们 来 看 看 一 些 最 著名 的 播放 需 。 


先 看 NYTimes.com "的 播放 器 ， 如 图 12-1 所 示 。 



















































































































































































li 物 加 以 研究 





hail 




















四 网 址 为 http://video.on.nytimes.com/。 一 一 译 者 注 
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图 12-1 


这 是 一 个 相当 有 代表 性 的 视频 播放 器 ， 显 示 了 视频 的 长 度 、 当 前 已 播放 
时 间 、 音 量 控件 、 播 放 / 暂停 按钮 ， 以 及 一 个 进度 条 。 但 是 ， 有 代表 性 
并 不 意味 着 没有 问题 


首先 ， 它 的 滑 块 按钮 〈 在 视频 时 间 轴 上 用 于 拖 动 的 滑 柄 ) 看 上 去 极其 难 
以 使 用 。 它 又 罕 又 小 ， 简 直到 了 可 笑 的 地 步 。 而 实际 上 该 滑 柄 的 响应 范 
围 其 实 还 蛮 大 的 ， 但 视觉 上 感觉 实在 太 难 点 击 。 我 相信 这 里 肯定 会 在 
开始 就 给 用 户 留 下 一 种 难以 使 用 的 印象 。 
其 次 ， 音 量 控件 的 滑 块 太 小 。 上 年 纪 的 用 户 ， 尤 其 是 那些 患 了 关节 炎 或 
手 部 活动 不 便 的 用 户 ， 在 移动 那些 需要 精准 度 的 控件 方面 可 能 会 有 麻烦 。 
CNN.com “的 视频 播放 器 也 有 类 似 的 问题 ， 见 图 12-2。 

音量 滑 块 太 小 ， 很 难 操作 。 文 本 也 太 小 ， 凡 有 轻微 视力 问题 的 用 户 都 很 
难 阅 读 。 


尽管 这 样 ，CNN.com 播放 器 还 是 有 很 多 东西 让 我 相当 喜欢 。 
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Oz 网 址 为 http://www.cnn.com/video/。 一 一 译 者 注 
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图 12-2 


首先 ，CNN 抵制 住 了 自动 播放 视频 的 冲动 。 这 意味 着 在 页 面 一 开始 载 入 
的 时 候 占 用 的 带宽 更 少 ， 同 时 也 意味 着 那些 不 想 看 视频 的 用 户 无 需 被 迫 
手动 停止 视频 ， 从 而 能 够 安静 地 阅读 页 面 。 


其 次 ， 页 面 载 入 后 ， 播 放 器 在 视频 框 的 正中 心 提供 了 一 个 大 大 的 播放 按 
钮 。 它 提示 用 户 当 前 显示 的 图 像 并 不 是 静态 图 片 ， 而 是 来 自视 频 ( 男 一 
个 提示 是 播放 器 控件 的 可 视 化 设置 )。 同 时 如 果 用 户 选择 观看 视频 的 话 ， 
它 也 提供 了 一 种 简单 、 明 显 的 方式 让 他 们 点 击 播放 。 一 个 按钮 做 了 两 件 
事 。 如 图 12-3 所 示 。 
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YouTube 的 播放 器 同样 也 提供 了 一 个 大 播放 按钮 (图 12-4 中 显示 的 播放 
器 是 我 们 经 常 在 YouTube 之 外 其 他 网 站 上 看 到 的 嵌入 式 版 本 ) "。 























世 ， Tube 








图 12-4 

然而 ，YouTube 播放 器 也 有 一 些 问 题 。 

首先 ， 尽 管 单 击 视频 框 正中 的 Play (播放 ) 按钮 可 以 直接 播放 页 面 中 的 
视频 ， 但 如 果 和 暂停 后 再 次 单 击 视频 框 时 ， 却 突然 会 弹出 一 个 新 窗口 链接 
到 YouTube 网 站 中 去 。 这 一 点 打破 了 用 户 的 预期 ， 因 为 他 们 认为 单 击 视 
频 框 自 然 会 开始 播放 。 
其 次 ， 播 放 时 间 那 里 仅仅 只 显示 了 剩余 时 间 ， 而 不 是 视频 的 整个 时 间 8。 
见 图 12-5。 
户 也 许 能 够 习惯 YouTube 这 种 与 其 他 网 站 不 同 的 时 间 显示 方式 ， 但 并 
没有 什么 理由 一 定 要 有 这 种 不 同 。 
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中 图 12-4 中 的 视频 名 为 The Paradox of Choice (Barry Schwartz)。 网 址 为 http://www. 
youtube. com/ watch?v= VO6XEQISCoML。 译 者 注 
@) 现在 YouTube 播放 器 在 该 问题 上 已 有 所 改进 。 译 者 注 
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二 可 二 (CERF | menu 





图 12-5 








而 且 ， 很 明显 ， 文 字 和 控件 都 非常 小 。 


最 后 ， 视 频 的 标题 并 不 在 嵌入 播放 器 里 。 所 以 当 有 人 想 在 自己 网 站 或 博 
客 上 肉 入 某 个 YouTube 视频 时 ， 他 们 必须 还 得 加 上 文字 来 说 明 这 个 视频 
是 什么 。 这 通常 也 意味 着 他 们 需要 来 回 切 换 浏览 器 窗口 ， 逐 字 地 确认 视 
频 名 称 并 写 下 来 。 


YouTube 成 功 的 秘诀 不 正 是 那 种 可 以 随处 嵌入 的 能 力 吗 ? 正 是 由 于 这 种 
功能 ， 你 才能 在 自己 的 网 站 上 和 自己 的 观众 分 享 。 那 么 他 们 为 什么 要 把 
视频 的 标题 排除 在 外 呢 ? 把 它 放 在 播放 器 里 面 难道 不 会 让 上 述 这 个 过 程 
更 为 简便 吗 ? 


总 而 言 之 ， 这 些 播放 器 中 的 每 一 个 都 做 对 了 一 些 事 ， 但 还 有 些 事 又 做 得 
不 是 很 漂亮 。 而 我 们 就 是 要 总 结 并 学 习 所 有 它们 干 得 不 错 的 地 方 。 
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12.1.1 且慢 一 一 还 有 做 得 更 好 的 


我 还 想 谈 谈 另 一 款 播放 器 ， 它 来 自 于 一 个 并 不 是 很 流行 的 网 站 ， 但 却 让 
我 非常 欣赏 。 这 款 播放 器 来 自 于 TED.com， 传 奇 般 的 TED Talks “的 视频 
版 本 网 站 ， 如 图 12-6 所 示 。 
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图 12-6 

















这 里 ，Al Gore 正在 演讲 我 们 如 何 才 能 协助 减缓 全球 气候 危机 的 问题 。 


控件 的 尺寸 相当 合适 ， 标 准 的 字体 大 小 让 文本 更 易 阅 读 ， 而 左上 角 还 提 
供 了 一 些 关 于 视频 的 附加 信息 ， 例 如 ， 录 制 和 发 布 的 具体 时 间 。 
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QTED Talks 来 自 于 TED (Technology、Entertainment 和 Design3 个 单词 的 首 字母 )。 
自 1984 年 开始 ，TED 以 定期 会 议 的 形式 聚集 技术 、 娱 乐 和 设计 界 的 人 士 分 享 并 传 
播 创 意 。TED.com 是 TED 于 2006 年 发 布 的 免费 视频 网 站 ， 汇 集 了 200 余 个 精彩 的 
演讲 视频 。 译 者 注 
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(TED 不 需要 在 播放 器 中 包含 视频 的 标题 ， 因 为 TED 视频 不 能 





是 吗 ? ) 
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相当 不 错 ， 











统 就 会 自动 出 现 。 








雾 93 


[ 接 杠 入 


























到 其 他 网 页 ， 除 非 你 找到 了 它们 的 YouTube 版 本 。 这 颇具 讽刺 意味 ， 不 











于 视频 的 长 度 超过 了 16 分 钟 ， 它 被 很 贴心 地 划分 成 数 个 音节 ， 
] 以 通过 播放 器 的 菜单 系统 来 跳 转 到 其 
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图 12-7 


而 用 户 











P 的 任意 部 分 。 见 图 12-7。 














对 吧 ? 你 所 要 做 的 只 是 把 鼠标 移动 到 视频 框 上 ， 这 个 沫 单 系 








TED 播放 器 我 发 现 的 唯一 的 大 问题 就 是 它 没有 提供 必要 的 提示 ， 


明白 只 要 鼠 


标 悬 停 在 视频 框 上 就 会 出 现 菜 单 系统 ， 从 而 能 够 在 章 ， 
| 
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让 用 
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供 导 航 。 用 
才 会 知道 有 这 一 功能 。 


另 一 个 小 问题 是 时 钟 图 标 过 小 ， 它 对 于 任何 视力 低 于 20/20〈 正 常 视力 标 



























































只 有 在 偶然 把 鼠标 〈 也 许 是 其 他 什么 原因 ) 移动 到 视频 -| 








ET 


准 ) 的 用 户 都 很 可 能 会 这 无 用 处 。 而 没有 时 钟 图 标的 话 ， 人 们 只 能 假设 


这 些 数 字 是 和 时 间 相 关 的 。 在 没有 明确 标记 的 情况 下 ， 用 户 必 须 去 思考 





数字 代表 什么 ， 而 人 类 似乎 又 总 是 在 逃避 思 
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12.1.2 ”博采众长 
总 的 来 看 ，TED.com 的 这 个 可 以 说 是 网 上 最 好 的 一 个 播放 器 了 。 因 此 它 
是 一 个 很 好 的 起 点 ， 让 我 们 开始 设计 一 款 新 的 、 能 在 绝 大 多 数 环境 中 通 
] 的 播放 器 。 


为 了 让 它 更 通俗 有 效 ， 我 需要 调整 几 处 我 认为 不 太 合适 的 地 方 ， 然 后 把 
Ratings 《评级 ) 按钮 去 掉 ， 换 成 章节 导航 的 荣 单 系统 入 口 。 


简 而 言 之 ， 我 希望 做 成 如 图 12-8 所 示 的 样子 。 
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图 12-8 
这 个 版 本 中 ， 我 在 左上 角 加 上 了 视频 标题 ， 用 Time 时间) 标记 替换 了 
之 前 小 的 时 钟 图 标 ， 然 后 把 Ratings 按钮 变 成 了 Chapters 〈 章 ) 按钮 。 


现在 ， 单 击 Chapters 按钮 将 会 打开 菜单 系统 ， 以 便 选择 视频 中 的 任 一 章 
他 。 见 图 12-9。 
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图 12-9 























钮 。 如 


现在 ， 这 款 播放 器 提供 了 所 需要 的 一 切 核心 功能 、 相 对 更 易 用 的 控件 、 
， 以 及 视频 的 相关 信息 长度、 已 播放 时 间 、 标 题 以 及 








但 在 你 开始 考虑 划分 视频 章节 所 需要 付 时 
并 不 是 每 一 个 视频 都 有 或 者 需要 划分 音节。 


所 以 我 为 播放 器 又 添加 了 一 条 规则 : 如 果 没 有 章节 ， 就 去 掉 Chapters 按 


清晰 可 辨 的 文本 















































图 12-10 所 示 。 












































录制 和 发 布 的 日 期 )。 
最 后 ， 我 决定 把 它 设置 为 默认 停止 状态 ， 避 免责 面 载 入 时 讨厌 的 


放 问 题 。 
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动 播 








然后 在 视频 框 的 中 心 加 上 一 个 又 大 又 漂亮 的 播放 按钮 ， 只 要 视 
频 停止 时 它 就 会 出 现 。 
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图 12-10 


搞定 ! 
曙 一 如果 什 么 时 候 需 要 为 你 的 网 站 设计 一 款 视频 播放 器 ， 给 我 电话 。 
我 已 经 为 你 准备 好 了 相当 棒 的 一 款 。 

噢 ， 现 在 就 有 电话 来 了 。 
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第 13 章 
巩固 你 的 表单 布局 





幸运 ， 我 们 在 网 上 遇 到 的 绝 大 多 数 表单 都 不 算 很 长 。 它 们 仅仅 包含 一 
表单 域 ， 也 许 还 有 1 到 2 个 下 拉 菜 单 ， 再 加 上 一 个 按钮 。 而 且 它们 能 
助 我 











们 完成 想 做 的 事 ， 让 我 们 能 在 某 个 新 的 网 站 或 应 用 上 注册 、 购 买 
和 品 或 者 联系 某 家 公司 。 


但 你 想 过 没有 ， 就 连 一 个 短 短 的 表单 这 样 的 东西 ， 为 什么 在 不 同 的 网 站 
里 看 上 去 差异 会 如 此 之 大 呢 ? 


有 些 表单 布局 成 两 列 ， 标 签 呈 左 对 齐 ， 还 有 一 些 则 是 呈 右 对 齐 。 另 外 一 
些 表 单 只 有 一 列 ， 而 标签 位 于 表单 域 的 上 方 居 左 对 齐 。Submit (提交 ) 
和 Cancel (取消 ) 等 按钮 要 么 在 表单 左 侧 要 么 在 右 侧 ， 有 了 时候 Submit 在 
Cancel 左边 ， 有 时候 又 在 它 右边 。 还 有 标签 ……: 唤 ， 别 让 我 说 标签 ， 根 
本 就 说 不 完 。 


很 无 奈 。 这 么 简单 的 事情 都 会 千差万别 。 


很 多 情况 下 ， 这 些 千 姿 百 态 的 设计 只 是 单纯 客观 条 件 下 的 产物 。 也 许 是 
因为 设计 师 认为 在 页 面 上 标签 右 对 齐 会 更 美观 ， 应 该 为 了 配合 页 面 来 设 
计 表 单 而 不 是 围绕 表单 来 设计 页 面 。 或 者 是 因为 开发 人 员 总 习惯 于 以 自 
己 网 站 上 的 表单 布局 方式 来 为 所 有 其 他 网 站 布局 。 还 有 更 甚 者， 也许 只 
是 某 个 人 直接 从 另 一 个 网 站 复制 粘贴 了 代码 ， 而 又 懒得 修改 。 

不 管 出 于 什么 理由 ,但 其 实 哪怕 是 没有 经 过 专门 设计 的 表单 ， 同 样 也 可 
能 创建 美好 瞬间 ， 从 而 为 用 户 整体 的 操作 体验 做 出 贡献 。 不 过 很 多 表单 
都 错过 了 这 个 机 会 。 

你 也 许 没有 意识 到 这 一 点 。 事 实 上 ， 每 一 种 布局 都 会 对 用 户 使 用 表单 
(以 及 你 的 网 站 ) 产生 积极 或 者 消极 的 影响 。 而 在 正确 的 时 间 选 用 正确 的 
布局 ， 才 是 提升 用 户 操作 体验 的 关键 ， 而 且 这 也 很 容易 做 到 。 
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C13.1 设计 出 行云流水 般 的 表单 


表单 需要 呈现 出 延续 的 流动 性 ， 而 表单 的 布局 则 极 大 地 影响 到 用 户 是 否 
能 够 成 功 地 填写 表单 。 例 如 下 面 这 个 为 某 在 线 社区 网 站 设计 的 注册 表单 。 


这 个 表单 只 需要 收集 用 户 的 真实 姓名 、 电 子 邮件 地 址 、 他 们 希望 的 用 户 
名 和 密码 ， 以 及 必要 的 信用 卡 信息 。 


我 完 考虑 了 两 列 的 布局 ， 标 签 居 左 对 齐 。 如 图 13-1 所 示 。 





Register 





First name: 








Last name: 








Email address: e.g. Me@mydomain.com 





New password: 








Confirm new password: 








Name on card: 



































Card #: 
Expiration: 01 |#| |07 |* 
Security code: EE 











图 13-1 


这 使 得 表单 很 好 看 ， 也 很 简短 ， 看 上 去 所 有 内 容 都 能 在 页 面 上 以 Above 
the fold 的 形式 呈现 〈 位 于 默认 的 可 视 区 域 ， 无 需 滚动 条 )， 然 而 这 种 布 
局 方式 较 之 其 他 布局 却 更 容易 引发 错误 。 因 为 在 第 一 列 和 第 二 列 ， 也 就 





GD Above the fold 这 一 术语 尚 无 准确 的 中 文 翻译 ， 该 词 起 源 于 报纸 的 排版 原则 。Fold 
原意 为 报纸 被 折 且 起 来 的 部 分 ， 排 版 人 员 应 力图 避免 重要 文章 《如 头条 新 闻 ) 的 标 
题 、 内 容 或 图 片 横 跨 折 革 处 从 而 造成 浏览 者 阅读 不 便 。 这 一 概念 在 Web 领域 中 则 取 
决 于 用 户 显 示 器 分 辨 率 的 Y 轴 大 小 。 译 者 注 
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是 字段 标签 〈 例 如 电子 邮件 ) 和 与 其 对 应 的 输入 域 间 的 映射 关系 很 不 明 
显 。 

旦 左右 两 列 的 布局 同时 也 降低 了 用 户 往 下 浏览 的 速度 。 如 果 是 那 种 需要 
仔细 阅读 的 表单 ， 可 能 这 样 会 很 好 ， 但 是 也 同样 容易 引发 错误 。 而 作为 
标准 的 注册 表单 来 说 ， 我 们 没有 必要 去 减缓 用 户 往 下 浏览 的 速度 。 于 是 
我 先 考 虑 了 右 对 齐 版 本 ， 如 图 13-2 所 示 。 


Register 





First name: | 








Last name: | 








Email address: |e.g. me@mydomain.com | 








New password: | 








Contfirm new password: | 








Name on card: | 
Card #: | 
Expiration: |01 |$| |07 |$ 























Security code: EE 








图 13-2 


标签 居 右 对 齐 时 ， 用 户 不 会 像 左 对 齐 时 那么 容易 犯错 ， 因 为 标签 和 输入 
域 之 间 更 为 接近 。 然 而 ， 右 对 齐 的 标签 在 页 面 的 左 侧 形 成 了 一 道 难 看 的 、 
锯齿 状 的 边缘 ， 这 种 平衡 性 的 失调 完全 没有 吸引 力 。 男 外 ， 不 管 标签 如 
何 摆 放 ， 两 列 的 布局 仍然 会 减缓 用 户 往 下 浏览 的 速度 。 


所 以 我 决定 直接 把 布局 变 成 一 列 来 显示 ， 而 标签 则 放 在 每 个 输入 域 的 上 
方 ， 居 左 对 齐 。 见 图 13-3。 
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Register 


First name: 








Last name: 








Email address: 
e.g. me@mydomain.com 








New password: 








Confirm new password: 








Name on card: 























Card #: 
Expiration: Security code. 
01 羡 [07 同 | 














(_ OK _) CCancel ) 





图 13-3 





这 种 布局 让 用 户 只 用 花 最 少 的 时 间 就 能 将 标签 和 输入 域 对 应 起 来 ， 因 此 
浏览 速度 比 两 列 布局 要 快 不 少 。 用 户 只 需 在 同一 个 方向 移动 视线 就 能 
到 标签 和 输入 域 ， 而 不 用 先 阅读 左 列 的 标签 然后 再 将 一 眼 右 侧 的 输入 域 。 
这 样 改善 了 的 分 组 ， 使 单列 布局 同样 也 能 减少 错误 的 发 生 。 


我 设计 的 大 部 分 表单 都 使 用 了 单列 布局 ， 标 签 位 于 输入 域 的 上 方 居 左 对 
齐 。 我 时 常 考虑 表单 的 布局 会 怎样 影响 到 用 户 与 之 交互 的 瞬间 ， 而 最 后 
总 是 选择 了 这 种 布局 方式 。 只 在 很 少 的 情况 下 我 才 会 有 意 地 在 用 户 填写 
表单 时 减缓 他 们 往 下 浏览 的 速度 ， 而 这 种 时 候 我 通常 更 多 依靠 的 是 优秀 
的 校 验 技 术 ， 而 不 是 真 去 给 他 们 造成 不 便 。 我 们 会 在 第 15 章 再 讨论 这 个 


问题 。 
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C13.2 让 “确定 /取消 ”更 完美 


哪怕 最 简单 的 表单 也 有 个 地 方 可 能 会 诱导 用 户 犯错 误 。 那 就 是 在 它们 最 
下 方 出 现 的 讨厌 的 OK/Cancel (确定 /取消 ) 按钮 。 


网 络 上 OK 和 Cancel 按钮 无 处 不 在 。 当 然 ， 它 们 并 不 总 是 标记 为 OK 和 
Cancel， 也 不 一 定 每 次 都 是 同样 的 用 途 ， 但 是 我 们 每 个 人 都 曾 遇 到 过 上 
百 万 次 了 。 这 两 个 按钮 的 组 合 简 直 是 横扫 天 下 ， 也 出 于 一 个 很 不 错 的 理 
由 : 在 Web 应 用 中 几乎 你 的 任何 行为 都 能 够 取消 。 


我 们 经 常 在 那 种 可 以 往返 的 交互 中 看 到 它们 。 用 户 从 第 一 页 开始 ， 然 
后 在 第 二 页 完成 交互 ， 如 果 单 击 Cancel 则 回 到 第 一 页 。 它 们 也 会 出 现 
在 同一 个 页 面 内 的 即时 交互 中 ， 例 如 在 某 些 在 线 工 具 网 站 上 修改 个 性 
设置 。 

这 对 按钮 最 有 代表 性 的 就 是 陈列 为 两 个 并 列 的 按钮 ， 而 且 采 用 标准 的 浏 
响 需 控件 外 观 。 这 种 设计 可 翡 地 持续 了 很 多 年 ， 而 且 应 用 于 无 数 个 应 用 
程序 中 。 


我 们 这 个 表单 也 以 这 种 最 具 代 表 性 的 按钮 套装 开始 。 如 图 13-4 所 示 。 



































图 13-4 





本 例 中 用 户 交 互 的 目标 是 注册 ， 就 这 么 简单 。 但 是 任何 一 个 设计 问题 都 
可 能 有 无 数 种 方式 来 解决 ， 而 即使 是 在 这 个 最 简单 的 例子 里 ， 也 同样 需 
要 做 几 个 决定 。 


第 一 要 决定 按钮 的 位 置 。 居 左 对 齐 还 是 居 右 对 齐 对 于 可 用 性 来 说 并 没有 
很 大 的 影响 ， 但 是 因为 下 述 理 由 我 一 般 仍然 坚持 把 它们 放 在 左边 。 


首先 ， 左 对 齐 使 所 有 元 素 都 依靠 左边 缘 顺 势 而 下 ， 从 表单 顶部 到 底部 形 
成 了 一 条 好 看 的 直线 。 其 次 这 也 是 一 种 美学 上 的 选择 ， 因 为 看 上 去 它 为 
表单 建立 了 一 个 视觉 上 的 支撑 点 。 在 完成 每 一 处 表单 域 后， 你 会 继续 规 
则 性 地 往 下 移动 。 把 动作 按钮 放 在 表单 的 尾部 看 上 去 就 好 像 把 一 切 都 钉 
牢固 定 下 来 。 当 然 这 也 许 只 是 我 的 个 人 感觉 。 
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第 二 要 决定 按钮 上 的 文字 。 当 然 ， 在 绝 大 部 分 情况 下 ， 使 用 标准 的 OK 
和 Cancel 最 为 省 事 ， 因 为 你 不 用 作 任 何 考 虑 ， 就 这 么 标记 也 完全 可 以 过 
关 。 但 是 这 两 个 术语 真 的 能 带 来 帮助 吗 ? 


OK 在 大 多 数 时 间 里 都 能 正常 工作 ， 但 是 意义 更 明显 的 按钮 标记 能 更 好 地 
帮助 用 户 建立 对 点 击 结果 的 期 望 。 


这 个 例子 中 单 击 OK 会 发 生 什 么 呢 ? 它 将 把 这 位 浏览 者 注册 为 网 站 的 一 
个 新 用 户 。 但 在 这 个 网 站 的 其 他 地 方 ，OK 也 许 意味 着 保存 某 项 设置 ， 或 
者 上 传 某 个 文件 。 

单 击 OK 不 能 使 用 户 建立 起 一 个 清晰 的 期 望 。 幸 和 运 的 是 ， 标 记 按 钮 并 不 
是 一 件 很 难 的 事情 。 我 所 要 做 的 只 是 把 按钮 上 的 文字 改 成 Register Now 
(现在 注册 〉 而已， 相当 简单 ， 见 图 13-5。 















































[Register now ) (Cancel ) 








13-5 


13.2.1 首选 处 理 方式 和 第 二 处 理 方式 

这 一 部 分 要 考虑 的 最 后 一 件 事 ， 可 能 对 于 设计 师 来 说 常常 是 毋庸 置疑 的 。 
那 就 是 我 们 经 党 赋予 这 两 个 按钮 同等 的 重要 性 ， 而 它们 却 会 引发 完全 不 
同 的 结果 。 一 个 用 于 用 户 注册 ， 另 一 个 则 取消 整个 操作 《〈 这 个 例子 中 将 
把 用 户 带 回 到 首页 )， 但 两 个 按钮 在 外 观 上 却 一 模 一 样 。 

我 能 理解 这 种 传统 形成 的 原因 。 两 个 选项 分 别 对 应 于 两 个 按钮 。 然 而 ， 
重要 的 并 不 是 选项 的 数量 ， 而 是 哪 一 个 选项 才 是 最 可 能 的 选择 。 

对 于 决定 在 网 站 注册 并 且 填 写 表单 的 用 户 来 说 ， 他 最 有 可 能 选择 去 单 击 
OK。 这 被 称 为 首选 处 理 方式 (Primary Action )。 而 取消 整个 注册 过 程 则 
是 不 太 可 能 的 选择 ， 它 被 称 为 第 二 处 理 方式 〈Secondary Action )。 

然而 ， 如 果 两 个 按钮 都 被 赋予 了 同等 的 视觉 重要 性 ， 那 么 用 户 则 必须 阅 
读 按 钮 上 的 标记 ， 而 且 两 个 按钮 都 得 阅读 以 便 决 定 应 该 点 击 哪 一 个 。 
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费 获 法 则 (Fitts”Law)“ 指 出， 点 击 某 个 目标 所 花费 的 时 间 可 以 通 
一 个 孔 数 来 求 值 ， 它 与 “鼠标 与 目标 的 距离 ”和 “目标 尺寸 ”密切 
关 。 根 据 这 一 法 则 ， 我 们 最 好 的 解决 办 法 就 是 从 第 二 处 理 方式 ， 也 就 
Cancel 按钮 上 减弱 一 些 注意 力 。 于 是 我 把 它 变 成 了 一 个 文字 链接 ， 如 图 
13-6 所 示 。 

















咖 菇 这 











(Registernow) Cancel 





图 13-6 


这 样 一 来 ，Register Now 按钮 变 得 更 为 突出 、 也 易于 点 击 了 ， 同 时 Cancel 
链接 也 不 再 那么 明显 ， 相 比 之 下 不 那么 容易 点 击 到 了 。 


这 两 个 按钮 是 不 是 变 得 很 难看 到 ? 没有 。 但 对 用 户 来 说 ， 现 在 点 击 失误 
倒是 不 再 那么 容易 了。 用户 的 视线 会 被 牵引 到 大 的 按钮 上 去 ， 而 且 它 很 
容易 让 人 下 意识 地 认识 到 大 的 按钮 很 可 能 就 是 首选 的 处 理 方式 。 如 果 那 
正 是 用 户 想 要 的 ， 他 们 几乎 都 不 需要 去 阅读 按钮 上 的 文字 。 如 果 用 户 想 
要 的 是 第 二 种 选择 ， 他 们 也 能 轻易 推断 出 不 突出 的 那个 选项 就 是 Cancel 
链接 。( 然 而 有 点 可 筑 的 是 ， 在 两 个 按钮 间 创 造 视觉 上 的 差异 将 使 得 它们 
I E 够 在 不 需 仔细 阅读 标记 的 情况 下 就 能 推断 
出 它们 的 含义 ， 他 们 反而 更 想 去 阅读 这 些 文字 。) 


顺便 说 一 句 ， 这 也 是 我 喜欢 让 按钮 居 左 对 齐 的 男 一 个 理由 。 
如 图 13-7 所 示 ， 把 大 HTML 按钮 与 其 上 的 表单 域 对 齐 ， 看 上 去 明显 比 让 
Cancel 链接 与 上 面 居 右 对 齐 要 好 得 多 。 


另外 ， 为 什么 要 把 按钮 放 在 左边 而 文字 链接 放 在 右边 呢 ? 因为 那些 使 用 
Tab 键 切 换 输入 域 的 用 户 将 先 到 达 Register Now 按钮 。 这 再 一 次 验证 了 我 
们 应 将 焦点 集中 在 可 能 性 更 大 的 选项 上 ， 同 时 降低 用 户 在 可 能 性 较 小 的 
选项 上 的 注意 力 。 


































































































@ 费 区 法 则 是 人 机 交互 领域 里 一 个 非常 重要 的 法 则 ，10 年 来 得 到 了 广泛 的 应 用 。 
基本 的 观点 就 是 当 一 个 人 用 鼠标 移动 指针 时 ， 屏 幕 上 目标 的 某 些 特征 会 使 得 点 击 
得 轻松 或 者 困难 。 目 标 离 得 越 远 ， 到 达 就 越 费劲 。 目 标 越 小 ， 就 越 难点 中 。 表 达 这 
一 概念 的 公式 为 : Time = a + b log2 (D/S + 1)。 其 中 ，Time 代表 “从 鼠标 到 达 目 标 
的 时 间 ”; D 代表 “鼠标 达到 目标 的 距离 ”; S 代表 “目标 的 尺寸 ”。 
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Name on card: 





























Card #: 

Expiration: Security code; 
01 闭 [07 同 一 
(Registernow) Cancel 





图 13-7 


13.2.2 ”这 很 重要 


现在 ,和 干 万 不 要 再 弄 错 了 。 对 于 任何 一 种 布局 来 说 ， 完 成 表单 花费 的 时 
间 多 几 秒 或 者 少 几 秒 ， 并 不 会 对 用 户 体验 造成 很 大 的 影响 。 归 根 结 底 ， 
最 重要 的 不 是 在 这 一 过 程 中 抠 出 那 珍 贵 的 数秒 钟 ， 而 在 于 完成 表单 所 带 
来 的 价值 是 否 能 超过 填写 表单 时 给 用 户 带 来 的 麻烦 和 沉闷 。 


在 一 开始 劝说 用 户 填 写 表单 是 整个 注册 过 程 中 最 困难 的 部 分 。 而 一 旦 你 
做 到 了 这 一 点 ， 就 应 当 像 对 待 真正 用 户 那 样 尽 可 能 地 善待 他 们 。 在 表单 
的 设计 中 考虑 每 一 种 方案 间 细 微 的 区 别 ， 也 就 是 真正 注意 到 每 一 处 细节 ， 
这 将 会 为 用 户 创造 另 一 个 平滑 顺畅 的 瞬间 。 而 每 一 个 瞬间 都 会 对 整体 的 
用 户 体验 做 出 贡献 。 

如 果 你 正在 花费 所 有 的 时 间 和 精力 来 创建 某 个 Web 应 用 ， 为 什么 要 把 自 
己 网 站 的 表单 设计 扔 给 运气 或 者 客观 环境 去 评判 呢 ? 主动 地 去 考虑 和 研 
究 ， 你 必定 会 收获 更 多 愉快 的 用 户 。 
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第 14 章 
驾驭 Wizard 向 导 











我 曾 参 与 过 一 个 广告 宣传 运作 管理 系统 的 设计 工作 。 其 中 创建 宣传 活动 
的 流程 需要 一 系列 用 户 以 特定 顺序 填写 表单 。 用 户 首先 需要 创建 一 个 活 
动 ， 包 括 指 定 活动 名 称 、 开 始 和 结束 日 期 以 及 其 他 相关 信息 ， 然 后 ， 
才能 在 该 活动 中 创建 广告 并 设置 经 费 额 度 等 。 


桌面 应 用 和 Web 应 用 一 样 ， 它 们 经 常 都 会 包含 一 些 必须 以 线性 方式 逐步 
完成 的 操作 流程 。 而 Wizard 向 导 通 常 被 用 来 解决 类 似 的 问题 。 它 是 一 种 
多 步骤 的 交互 方式 ， 用 于 引导 用 户 一 步 一 步 地 通过 那些 有 固定 顺序 的 处 
理 过 程 ， 并 且 通 常 被 用 来 解决 类 似 的 问题 。 


目前 ， 基 本 上 任何 古老 的 Wizard 向 导 设 计 都 能 帮助 用 户 完 成 这 种 过 程 。 
但 是 有 良好 的 指示 天 为 用 户 预 期 表单 复杂 度 提 供 线索 ， 更 能 够 增进 用 户 
的 信心 ， 并 且 能 为 交互 创建 一 种 清晰 、 易 于 理解 的 瞬间 。 

有 具体 地 说 ， 我 们 可 以 通过 提供 一 系列 “路 标 ” 来 为 用 户 建 立 清晰 的 预 
期 。 


C 14.1 建立 清晰 的 预期 
首先 让 我 们 考虑 当 Wizard 向 导 和 缺乏 必要 的 指示 器 时 会 发 生 什 么 。 


图 14-1 的 界面 中 唯一 能 告诉 你 这 步 操 作 并 不 是 整个 交互 最 后 一 步 的 元 素 
是 Next( 下 一 步 ) 按钮 。 这 里 没有 任何 东西 能 让 你 知道 创建 整个 宣传 活 
动 总 共 需 要 多 少 个 步 又 。 
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Campaign setup 


Campaign name: 











Start date: End date: 
口 03i0370 口 O303/11 


Geographical area: 
[United States 2 











Language for the ads: 
[United States < 


( Next 

















图 14-1 


在 这 个 设计 中 ， 你 填写 完 页 面 中 的 表单 然后 单 击 Next。 下 一 个 步骤 会 载 
入 一 个 新 页 面 ， 然 后 填写 表单 ， 再 次 单 击 Next， 等 在 它 后 面 的 又 是 另 一 
个 表单 。 你 在 事先 肯定 没有 预料 到 这 一 点 ， 所 以 每 当 看 到 另 一 个 Next 按 
钮 时 ， 你 都 会 被 迫 去 猜想 为 了 完成 这 个 创建 过 程 到 底 还 需要 多 少 个 步 又 。 


我 到 哪 一 步 了 ? 还 有 多 少 步 ? 每 一 步 有 多 长 ? 填 完 这 些 是 不 是 还 需要 很 
长 时 间 ? 我 是 否 应 该 取消 今天 的 晚餐 计划 ? 


这 对 用 户 建立 自信 心 真 没什么 帮助 。 

你 也 能 很 轻易 地 去 除 用 户 的 挫败 感 ， 只 需要 为 他 们 建立 期 望 ， 让 他 们 预 
先知 道 总 共有 多 少 个 步 又。 

同时 我 们 也 应 该 告诉 他 们 去 过 哪里 ， 现 在 在 哪里 ， 将 来 还 要 到 哪里 。 

这 很 简单 ， 有 点 像 为 每 个 步骤 加 上 一 个 描述 标题 栏 。 图 14-2 里 面 的 标题 
栏 指出 共有 4 个 步骤， 用 户 此 刻 正 处 于 第 一 步 ， 而 第 一 步 是 关于 Create a 
campaign 〈 创 建 一 个 活动 )。 

仅 这 一 点 就 是 个 很 大 的 进步 ， 不 过 它 还 可 以 变 得 更 有 效果 。 

将 所 有 步骤 的 名 称 都 展现 给 用 户 将 会 更 有 帮助 。 通 过 这 种 方式 用 户 可 以 
随时 将 一 眼 自己 正在 哪个 阶段 ， 然 后 决定 是 否 继续 。 为 了 做 到 这 一 点 ， 
尝试 了 一 种 标签 页 界面 的 变 体 。 
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Campaign setup 


Campaign name: 








Tip: 
Start date: End date: 
口 oaoa'10 口 03/03/11 | 


Geographical area: 
United States 一 





Language for the ads: 
[United States 上 日 











图 14-2 


在 图 14-3 这 个 版 本 中 ， 用 户 能 更 容易 地 看 到 共有 4 个 步 又， 也 更 容易 明 
了 他 们 即将 需要 什么 类 型 的 信息 。 


Campaign setup 








Campaign name: 











Start date: End date: 
口 o303/10 品 030311 


Geographical area: 
[United States 5 











Language for the ads: 
United States 号 











图 14-3 


当前 步骤 是 绿色 的 ， 而 随后 的 步 又 不 可 点 击 ， 因 此 用 户 不 能 随意 和 弄 错 顺 
序 。 每 当 完 成 一 个 步 又 后 ， 相 关 的 信息 将 会 被 记录 ， 在 下 一 步 中 系统 会 
根据 之 前 的 选择 进行 验证 。 
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设 定 范 围 界限 

然而 ， 就 如 我 们 都 知道 的 网 页 上 的 垂直 空间 是 无 限 的 。 页 面 有 多 长 并 不 
重要 ， 深 动 条 会 自动 适应 并 让 我 们 来 回 查看 它 。 正 因为 这 一 点 ， 在 现 有 
的 设计 中 我 们 无 从 知道 每 个 步骤 到 底 有 多 长 。 

“告诉 大 家 ， 第 二 步 里 面包 含 了 26 个 多 项 选择 、1 个 字谜， 以 及 1 个 问答 
是 ,” 

我 希望 能 为 用 户 建立 一 种 比 上 述 更 为 清晰 的 预期 。 我 希望 用 户 只 要 将 一 
眼 表 单 ， 就 能 推断 出 完成 整个 过 程 不 会 超过 5 分 钟 。 

为 了 实现 这 一 点 ， 我 需要 体现 出 Wizard 向 导 里 的 每 个 步骤 真 的 都 非常 
短 。 唯 一 能 做 到 的 方式 就 是 为 这 个 区 域 设 定 一 个 固定 的 高 度 。 


换 句 话说 ,我 需要 一 个 可 折 欠 面板 控件 来 取代 现 有 的 标签 页 。 如 图 14-4 
所 示 。 


Campaign setup 


Campaign name: 





Start date: End date: 
口 O303/10 口 O303/11 


Geographical area: 
United States = 








Language for the ads: 
United States 图 











b 2. Create an advertisement 





Pp 3. Set relevant keywords | 








> 4 Set spending limits 








图 14-4 
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可 折 径 面板 控件 是 一 种 和 手风琴 非常 相似 的 界面 *。 它 包含 数 个 面板 ， 依 
据 用 户 的 输入 而 展开 和 收拢 。 图 14-4 中 ， 第 一 个 面板 是 展开 的 (可 见 或 
打开 )， 包 含 了 Create a campaign 表单 。 而 第 二 、 三 、 四 个 面板 则 都 是 收 
拢 的 〈 隐 藏 或 关闭 )， 其 中 的 每 一 个 面板 都 不 能 点 击 ， 以 此 来 预防 用 户 以 
错误 的 顺序 访问 某 个 过 程 。 

这 个 设计 中 ， 用 户 填 写 完 当前 表单 并 单 击 Next 后 ， 第 一 个 面板 将 滑动 收 
拢 ， 而 第 二 个 面板 随 之 滑动 展开 。 用 户 重 复 这 一 过 程 直 到 第 四 步 结束 。 
因为 整个 界面 的 高 度 是 固定 的 ， 用 户 很 容易 就 能 推断 出 在 这 个 过 程 中 每 
一 个 步骤 所 包含 的 表单 都 会 和 第 一 步 里 面 一 样 简短 ， 甚 至 更 短 。 这 样 他 
们 就 能 建立 一 种 期 望 认为 自己 能 在 很 短 时 间 内 就 可 以 完成 整个 表单 。 

和 之 前 的 设计 一 样 ， 过 程 中 每 个 步骤 都 有 一 个 Next 按钮 。 而 第 四 步 是 最 
后 一 步 ， 所 以 我 用 了 一 个 动 宾 词 组 来 代替 Next， 见 图 14-5。 


















Campaign setup 
和 1. Create a campalgn 
| 2.Create an advertisement 


| 3.Setrelevant keywords 












Campaign daily budget (e.g. "3.00"): 
5 








Max cost-per-click (e.g. "1.00"): 
5 























图 14-5 








@ 可 折 革 面板 控件 和 手风琴 的 英文 一 样 ， 都 是 Accordion。 译 者 注 
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这 样 很 清楚 地 表明 用 户 正 在 保存 所 有 的 信息 ， 他 的 活动 正在 被 创建 。 


最 后 一 步 ， 我 把 每 个 已 访问 过 的 面板 标题 改 成 了 链接 形式 ， 以 此 告诉 用 
户 可 以 返回 之 前 那些 面板 去 修改 已 经 输入 的 信息 。 当 然 ， 有 些 改动 可 能 
会 影响 到 后 面 的 面板 。 如 果 发 生 这 种 情况 ， 你 可 以 在 用 户 每 次 做 出 这 类 
改动 时 显示 一 条 消息 说 明 这 一 影响 ， 并 且 要 求 他 们 重新 进行 后 续 的 设置 。 
通过 显示 步骤 数 并 且 帮 助 用 户 推断 每 个 步骤 的 长 度 ， 我 们 为 用 户 建立 了 
清晰 的 期 望 。 他 们 能 够 知道 自己 正在 做 什么 ， 还 能 预 佑 完成 整个 过 程 所 
需 的 努力 ， 同 时 还 可 以 获得 一 个 愉快 的 ， 或 者 至 少 是 相对 轻松 的 瞬间 。 
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如 果 不 讨论 长 度 或 复杂 度 ， 表 单 设计 的 最 关键 问题 之 一 就 是 用 户 可 能 会 
在 填写 过 程 中 犯 各 种 错误 。 


犯错 误 时 我 们 会 责怪 自己 ， 用 户 也 一 样 。 绝 大 部 分 表单 都 只 有 很 简短 的 标 
签 ， 同 时 也 缺少 提示 性 的 默认 值 ， 而 最 普遍 的 黄 过 于 没有 任何 预防 及 侦 测 
错误 的 方法 。 即 使 我 们 绝 大 部 分 人 可 能 都 认为 自己 相当 聪明 ， 可 一 旦 错误 
发 生 ， 我 们 却 总 认为 是 自己 的 过 失 ， 而 不 是 指责 该 程序 设计 得 有 问题 。 


自我 指责 不 可 能 创造 美好 瞬间 。 它 和 我 们 所 希望 的 用 户 使 用 感受 (和 我 
一 起 念 有 成 效 、 聪 蔗 而 且 备 受 导 重 ) 完全 相反 。 


因此 ， 要 想 改 善 产 品 ， 我 们 最 需要 做 的 事情 就 是 无 论 何 时 都 尽力 杜绝 错 
误 的 出 现 。 而 正 因为 用 户 在 表单 里 到 处 都 有 可 能 犯错 误 ， 它 倒是 一 个 很 
好 的 开始 。 


妥 多 表单 使 用 了 一 种 简单 又 明 显 的 方式 提示 错误 : JavaScript 的 警告 对 话 
框 。 见 图 15-1， 它 出 自 GoDaddy.com" 的 验证 程序 。 


由 于 警告 对 话 框 非常 容易 创建 ， 你 只 需要 一 行 JavaScript 代码 ， 因 此 它们 
现在 已 变 成 了 互联 网 上 报告 错误 的 标准 方式 。 


日 现在 的 问题 是 人 们 已 经 习惯 了 这 种 告警 方式 。 他 们 不 再 阅读 上 面 的 文 
字 ， 而 只 是 被 动 地 扫 一 眼 ， 然 后 便 单 击 OK 按钮 。 如 果 用 户 根本 不 去 读 ， 
或 者 说 他 们 单 击 OK 只 是 出 于 习惯 而 不 是 因为 理解 ， 那 么 显示 这 种 警告 
对 话 框 几乎 一 点 用 处 都 没有 。 
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QD GoDaddy 是 世界 第 一 大 域名 注册 商 ， 进 军 主 机 领域 后 发 展 迅 速 。 目 前 放置 在 
GoDaddy 上 的 网 站 数量 已 居 世 界 首位 。GoDaddy 同时 提供 Linux 主机 、Windows 主 
机 、VPS 以 及 独立 主机 全 线 主机 产品 ， 各 种 需求 的 客户 在 这 里 都 可 以 找到 适合 自己 
的 产品 。 网 址 为 http://www.godaddy.com。 一 一 译 者 注 
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Registration Agreement' 
by checking the 'Domain Registration Agreement 
checkbox on this page. 


> https:/ /cart.godaddy.com 
的 To register a domain you must accept the 'Domain 





15-1 

同时 ， 警 告 对 话 框 是 一 种 应 用 程序 模式 ( application-modal ) 2， 也 就 是 说 
在 警告 被 处 理 之 前 ， 浏 览 器 功能 将 被 强制 失效 。 人 然而 实际 上 ， 真 正 严重 到 
需要 用 户 必须 马上 处 理 的 错误 并 不 多 ， 所 以 动不动 就 锁 住 他 们 的 浏览 器 其 
实 是 相当 粗鲁 的 行为 。 而 现在 却 是 几乎 每 一 个 错误 都 要 变 成 警告 对 话 框 来 
打 断 用 户 的 正常 工作 。 没 有 别 的 原因 ， 只 是 因为 警告 对 话 框 很 容易 创建 。 

了 控制 住 你 自己 ， 记 住 下 面 这 句 话 : 

警告 对 话 框 用 得 越 多 ， 就 越 没 有 效果 。 

它们 应 该 用 于 应 付 紧 急事 件 ， 例 如 当 网 站 着 火 时 用 来 敲 碎 放 灭火 器 的 玻璃 。 
对 于 错误 信息 以 及 校 验 来 说 ， 它 们 几乎 完全 可 以 用 不 那么 粗暴 的 方式 来 
展现 ， 从 而 创建 一 个 更 为 友好 的 瞬间 。 

在 为 UpDown-Repeat 网 站 的 校 验 表单 进行 设计 时 ，Kris Hadlock”( 来 
自 Miskeeto “的 一 位 顾问 ) 和 我 致力 于 改善 这 一 局 面 。 我 们 设计 出 了 一 套 














过 




















@ 应 用 程序 模式 对 话 框 将 阻止 用 户 和 该 应 用 程序 发 生 其 他 任何 交互 ， 但 用 户 可 以 切换 
到 其 他 应 用 程序 。 读 者 可 以 通过 以 下 链接 查阅 Apple 的 人 机 界面 指南 (Apple Hu- 
man Interface Guidelines) 中 关于 application-modal 的 详细 说 明 http://developer.apple. 
com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGWindows/ 
chapter_18_section_7.html。 译 者 注 

@) UpDown-Repeat 是 一 个 设计 界 的 工作 坊 (Workshop) 网 站 ， 用 户 可 以 在 线 发 起 或 参 
加 各 类 型 工作 坊 。 但 该 网 站 现 已 不 再 经 营 。 译 者 注 

@) Kris Hadlock 是 一 名 Web 设计 师 和 程序 员 ， 同 时 也 是 一 位 作者 。 他 成 立 了 Studio 
Sedition〈 暴 动工 作 室 )， 网 址 为 http://www.studiosedition.com/。 译 者 注 

@ Miskeeto 是 一 个 世界 级 的 网 页 设计 、 开 发 及 战略 研究 的 团队 ， 领 导 者 是 Robert 
Hoekman, Jr.〈 其 实 也 就 是 本 书 作 者 )。 他 们 聘请 的 顾问 都 是 来 自 志 界 各 地 的 专家 及 
有 杰出 贡献 者 。 该 团队 的 网 站 为 http:/www.miskeeto.com/。 一 一 译 者 注 
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解决 方案 ， 在 事先 便 尽 可 能 多 地 减少 错误 ， 如 果 仍 有 漏网 之 鱼 则 礼貌 地 
通报 给 用 户 ， 竭 尽 所 能 让 该 表单 不 再 给 用 户 造 成 麻烦 。 
C15.1 要 纠 错 ， 也 要 赞扬 


UpDown-Repeat 网 站 中 ， 用 户 如 果 想 出 席 某 个 研讨 会 或 工作 坊 ， 需 要 和 输 
入 本 人 的 映 份 及 账户 信息 。 而 在 这 个 填写 过 程 中 几乎 每 一 个 表单 域 都 有 
可 能 引发 错误 。 


可 能 用 户 输入 的 电子 邮件 地 址 无 效 ， 或 者 信用 卡号 里 漏 掉 了 一 个 数字 ， 
或 者 遗漏 了 某 个 必 填 项 ， 或 者 其 他 诸如 此 类 的 错误 。 


那么 我 们 怎样 才能 制止 这 种 令 人 抓 狂 的 局 面 呢 ? 
可 以 学 习 已 有 的 不 错 实例 ， 比 如 Eventful 网 站 的 注册 表单 ”。 


如 图 15-2 所 示 ， 这 个 表单 不 仅 能 在 错误 发 生 的 第 一 时 间 就 做 出 响应 ， 而 
且 立 即 在 该 处 使 用 了 极为 醒目 的 红色 背景 ， 并 加 以 表意 清晰 的 提示 信息 。 




















“Register 


Something's wrong! 
Please see the highlighted field below. 


Email = 
robert@miskeeto.com 


Your email is for verification purposes. You will receive an 
emall with a link for you to confirm your emall address. 


Username e 


Atleast 2 characters 


| Usemame must start with a letter; end with a letter or 
| number; not be only numbers; and use only letters, 
| numbers, dashes, or underscores 


Password 


Atleast 6 characters 





图 15-2 


中 本 书 英文 版 发 行 后 ， 该 网 站 的 注册 表单 已 经 被 改进 。 网 页 为 http://eventful.com/ 
join。 一 一 译 者 注 
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Eventful 网 站 并 不 只 是 把 “User names must be at least 2 characters”( 用 户 
名 至 少 需要 2 个 字符 ) 殷 在 那里 就 完事 了 了。 错误 发 生 时 会 随即 显示 出 更 
多 的 信息 。 具 言 之 : 


用 户 名 必须 : 以 字母 开头 ; 以 字母 或 数字 结尾 ; 不 能 只 包含 
字 ; 只 能 使 用 字母 、 数 字 、 横 线 或 下 划 线 。 


已 经 说 明了 必须 以 字母 开头， 其 实 无 需 强调 用 户 名 不 能 只 包含 数字 。 尽 
管 稍 嫌 哆 味 ， 但 这 些 信息 确实 有 助 于 解释 用 户 在 该 处 的 可 选 范 围 ， 并 且 
说 明了 应 当 如 何 改正 错误 。 


我 不 喜欢 Eventful 表单 的 地 方 ， 同 时 也 是 绝 大 多 数 表单 都 存在 的 问题 ， 
在 于 它 仅仅 只 在 出 错时 才 提 醒 你 ， 而 做 对 了 的 时 候 却 什么 也 不 说 。 哪 怕 
正确 地 填写 完整 个 表单 ， 没 有 看 到 一 个 出 错 提 示 ， 你 仍然 会 怀疑 到 底 是 
不 是 真 的 完全 没有 问题 。 你 仍然 会 民情 不 安 地 猜测 是 否 在 提交 表单 时 将 
出 现 一 个 错误 列表 。 


所 以 除了 检测 到 错误 时 立即 显示 友好 的 提示 信息 之 外 ， 告 诉 用 户 “ 一 切 
都 没有 问题 ”同样 也 很 重要 。 

要 把 这 些 想法 应 用 到 UpDownRepeat 网 站 的 校 验 表单 中 去 ， 我 们 从 默认 
状态 的 表单 开始 ， 如 图 15-3 所 示 。 


溢 






































/ 


Attend ee first name: * 


Attendee last name: * 


Attend ee email (e.g. me@mydomain.com). * 





15-3 
我 们 希望 只 要 用 户 正确 地 完成 一 个 步 又 ， 就 在 第 一 时 间 告 诉 他 们 。 因 此 
我 们 “ 惠 窃 ”了 OurProperty.co.uk“ 的 点 子 : 用 户 正确 地 填写 完 某 项 后 ， 
在 该 项 旁边 显示 一 个 绿色 的 色 号 以 表示 “通过 ”。 如 图 15-4 所 示 。 



































人 OurProperty 是 一 个 英国 房产 交易 网 站 。 该 网 站 注册 页 面 为 https://passport.fubra.com/ 
_ourproperty/signup.html。 一 一 译 者 注 
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Attend ee first name: * 


Robert Ld 


Attendee last name: * 


Attend ee email (e.g. me@mydomain.com): * 





图 15-4 


而 下 一 步 ， 毫 无 疑问 ， 就 是 及 时 检测 错误 ， 并 且 友 好 地 进行 相关 提示 ， 
以 便 用 户 改 正 。 
I | 我 们 在 每 个 输入 域 的 下 方 都 创建 了 一 一 个 红色 的 文本 信 


息 ， 把 输入 域 边框 也 设置 为 红色 。 这 样 能 更 加 增强 输入 域 和 提示 信息 之 
间 的 联系 。 如 图 15-5 所 示 。 


Attendee first name: * 


Robert A 


Attendee last name: * 


L | 


Please enter your last name. 


Attendee email {e.g. me@mydomain.com): * 





图 15-5 


而 此 处 的 关键 在 于 我 们 应 当 在 用 户 输入 之 后 再 显示 错误 提示 。 这 是 从 
Remember the Milk 网 站 ?学 到 的 教训 。 在 该 网 站 中 ， 输 入 域 刚 获得 焦点 
就 会 出 现 错误 提示 2 。 





Remember the Milk 是 个 人 任务 管理 网 站 ， 能 能 入 到 Google Calendar、Gmail、 
Twitter、BlackBerry 和 iPhone 等 服务 中 。 网 址 为 http://www.rememberthemilk.com/。 
译 者 注 
@@ 在 该 网 站 的 注册 过 程 中 ， 每 当 用 户 试图 在 某 个 输入 域 中 输入 信息 时 就 会 出 现 一 个 红 
色 的 错误 图 标 ， 并 给 出 相应 的 输入 限制 。 具 体 页 面 见 http://www.rememberthemilk. 
com/ signup/。 一 一 译 者 注 
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在 用 户 还 没有 机 会 输入 有 效 信息 之 前 就 责备 他 们 把 事情 搞 古 了 ， 这 是 相 
当 粗 鲁 的 。 我 们 希望 避免 这 一 点 。 因 此 只 在 输入 域 失 去 焦点 时 ， 我 们 才 
检测 是 否 显示 错误 提示 。 


可 能 现在 你 的 脑海 中 会 跳出 一 个 问题 。 


如 果 用 户 忽略 某 些 必 填 项 ， 直 接 跳 到 表单 未 尾 试图 完成 填写 过 程 ， 又 会 
怎样 ? 

在 这 种 情况 下 ， 某 些 输入 域 根本 不 会 获得 焦点 ， 因 此 提示 信息 也 就 不 可 
能 被 触发 。 我 们 考虑 到 了 这 一 点 。 

通常 来 说 ， 人 们 会 按 顺 序 填 写 表单 。 所 以 我 们 有 把 握 认为 这 个 问题 几乎 不 
太 可 能 发 生 。 但 为 了 保证 在 这 种 情况 下 用 户 仍 然 能 纠正 问题 ， 我 们 建立 了 
一 个 后 备 计划 : 在 表单 页 面 的 项 部 创建 了 一 个 奶油 色 背 景 的 提示 区 域 。 


如 果 用 户 跳 过 了 部 分 表单 并 尝试 提交 ， 他 将 会 看 到 如 图 15-6 所 示 的 提示 
信息 ， 同 时 在 页 面 中 列举 了 发 生 的 错误 。 














Unfortunately, there was an error with your address. Please double-check this information. 


The Art and Science of Web Forms 


* = required field 
Contact Information 





ive a receipt along with the directions, time and additional details about the event once 


you complete your order, Please complete the required fields below 





图 15-6 





假设 用 户 看 到 了 红色 的 错误 提示 并 且 修 改 了 自己 的 输入 结果 ， 那 么 错误 
将 会 被 绿色 的 色 号 代替 。 如 图 15-7 所 示 。 


Attendee first name: * 


Robert v 


Attendee last name: * 


Hoekman, Jr. Vv 


Attendee email {e.g. me@mydomain.com): * 


robert@miskeeto.com v 





图 15-7 
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这 个 表单 也 许 还 没有 百分之百 的 做 到 错误 核验 ， 事 实 上 谁 也 无 法 保证 这 
一 点 ， 但 是 它 为 用 户 完 成 表单 提供 了 坚实 有 效 的 反馈 ， 这 一 点 干 得 很 不 
错 。 


实时 更 新 信息 


最 后 ， 我 们 希望 在 该 操作 中 能 清楚 并 正确 地 显示 与 会 的 费用 。 为 了 做 到 
这 一 点 ， 我 们 使 用 了 JavaScript 脚本 ， 根 据 与 会 者 和 与 会 学 生 的 人 数 及 时 
更 新 总 费用 。 如 果 有 人 享有 折扣 ， 就 改变 总 金额 。 


如 图 15-8 所 示 ， 在 缺 省 情况 下 用 户 将 会 看 到 研讨 会 的 标准 费用 〈$149 )。 











Booking Information 


Number of attendees 


1 


How many of these attendees are students? 


(Lowers price to $119. Make sure to bring each student’s ID. They will be checked at the door.) 


Promo code, if applicable 


Credit Information 


Your total price of admission is: $149 





图 15-8 


如 果 用 户 把 与 会 者 人 数 改 成 3 个 ， 总 金额 会 自动 修改 ($447)。 如 图 15-9 
所 示 。 


而 如 果 与 会 者 中 有 两 名 是 学 生 的 话 ， 那 么 与 会 费用 从 $149 变 成 了 $119， 
于 是 总 金额 会 再 度 调 整 〈$387)。 见 图 15-10。 
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Booking Information 


Number of attendees: 
3 


How many of these attendees are students? 
(Lowers price to $5119, Make sure to bring each student's ID, They will be che cked at the door,) 


Promo code, if applicable: 


Credit Information 


Your total price of admission is: S447 





图 15-9 
Booking Information 


Number of attendees: 
3 


How many of these attendees are students? 


{Lowers price to $5119. Make sure to bring each Student's1D. They will be checked at the door,) 
2 
Promo code, if applicable: 


Credit Information 


Your total price of admission is: S387 





图 15-10 
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在 色 号 图 标 、 错 误 提 示 和 即时 更 新 信息 的 协作 下 ， 这 个 表单 预防 并 侦 测 
了 可 能 在 表单 中 出 现 的 几乎 任何 错误 。 以 上 案例 中 ， 我 们 要 达到 两 个 目 
标 。 


第 一 是 用 户 的 目标 一 一 没有 太 多 麻烦 地 完成 表单 。 第 二 是 重要 的 业务 日 
标 一 一 让 人 们 为 研讨 会 付费 。 


在 完成 某 项 任务 的 过 程 中 ， 那 些 用 户 目标 和 业务 目标 最 好 以 愉快 并 且 激 
发 愿景 的 方式 交互 。 用 户 所 希望 完成 的 ， 同 时 与 业务 考虑 相 吻 合 ， 这 才 
是 最 理想 的 任务 。 上 述 的 校 验 表单 过 程 就 是 其 中 之 一 。 用 户 最 多 只 愿 填 
写 一 个 表单 ， 而 他 们 希望 在 这 一 次 过 程 中 就 能 完成 购买 。 从 业务 角度 出 
发 ， 我 们 也 希望 用 户 达 到 同样 的 目的 ， 因 为 这 能 给 我 们 带 来 利润 。 

为 了 满足 我 们 的 需求 ， 先 得 保证 满足 用 户 的 需求 。 吵 一 一 如 果 有 人 和 想 给 
我 们 钱 ， 那 么 至 少 我 们 应 该 帮助 他 来 给 ， 不 是 吗 ? 


让 我 们 面 对 它 。 填 写 校 验 表单 并 不 像 小 镇 一 夜 那么 浪漫 。 尽 我 们 所 能 3 
让 这 一 过 程 更 加 流畅 ， 让 用 户 在 输入 账户 信息 的 瞬间 尽 可 能 得 愉快 。 


也 许 不 能 让 这 一 过 程 很 有 意思 ， 但 至 少 可 以 让 它 别 那么 糟糕 。 
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简化 长 表单 





我 兽 与 某 家 大 型 保险 公司 合作 ， 为 其 人 寿 保 险 申 请 流程 中 所 涉及 的 规章 
制度 及 合法 性 做 了 大 量 的 研究 工作 。 然 后 他 们 设计 出 了 一 套 迄 今 以 来 我 
所 见 过 的 最 具 “ 欺 骗 性 ”的 表单 。 


这 个 表单 在 一 开始 只 有 3 道 简单 的 是 非 题 ， 例 如 “您 、 您 的 配偶 及 家 属 是 
否 曾 通 过 其 他 公司 购买 过 Acme 的 专项 医疗 、 牙 科 、 眼 科 等 保险 项 目 ?” 


如 果 每 个 问题 都 选择 “不 ” 那么 你 很 安全 。 但 如 果 其 中 有 任何 一 道 你 选 
择 了 “是 ”， 表 单 就 会 增长 。 新 的 表单 域 自动 地 人 藤 入 到 页 面 中 ， 让 表单 变 
得 更 长 ， 同 时 也 需要 你 付出 更 多 的 努力 才能 完成 。 


比方 说 ， 如 果 你 选择 通过 其 他 某 个 公司 买 了 保险 ， 就 会 出 现 关 于 医疗 、 
牙科 和 眼科 保险 项 目的 复 选 框 。 如 果 你 选中 了 医疗 选项 ， 表 单 将 会 再 次 
增长 ， 并 且 要 求 你 填写 该 公司 的 名 称 、 地 址 和 电话 号 码 。 它 还 会 询问 你 
的 保单 号 、 生 效 日 期 和 终止 日 期 。 如 果 你 选择 了 牙科 选项 ， 则 又 会 出 现 
新 的 表单 域 。 如 果 你 3 项 都 选 了 ， 那 么 你 将 会 有 一 整个 下 午 的 快乐 时 间 ， 
试 着 回答 一 些 可 能 自己 都 不 知道 答案 的 问题 。 


而 这 一 切 都 是 因为 你 在 第 一 道 是 非 题 中 选择 了 “是 ”。 别 忘 了 ， 男 外 还 有 
两 道 题 ， 它 们 都 会 出 现 类 似 的 结果 。 也 就 是 说 ， 这 个 表单 的 总 长 度 大 概 
是 我 们 现在 所 看 到 的 3 倍 。 


一 开始 只 有 3 个 简单 问题 的 表单 瞬间 变 成 了 一 个 醒 着 的 民 梦 。 表 单 似乎 
无 休 无 止 : 你 的 每 一 次 点 击 都 会 让 表单 增长 ， 就 好 像 影 片 The Blop "里 面 
那个 搞笑 的 果冻 怪物 一 样 。 你 可 能 会 耗费 一 整个 下 午 ， 而 只 是 在 尽力 完 
成 这 一 个 页 面 。 






















































































































































































GD The Blob 变形 怪 体 ) 是 一 部 科幻 / 邵 怖 /喜剧 片 ，Allied Artists 影 业 公司 1958 年 出 
品 。 影 片 中 一 个 如 同 巨 大 果冻 的 神秘 外 星 怪物 随 着 陨 星 落 到 地 球 上 。 译 者 注 
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我 的 客户 出 发 点 是 好 的 ， 他 们 希望 用 户 能 够 在 一 个 界面 中 填写 完成 ， 认 
为 这 样 对 用 户 会 更 简单 。 毕 竞 ， 等 待 载 和 一 个 新 页 面 会 非常 让 人 讨厌 ， 
而 且 如 果 出 现 了 错误 ， 回 退 修正 也 会 冒 丢 失 会 话 的 风险 。 


但 是 在 用 户 努 力 完成 这 个 表单 的 时 候 也 失去 了 其 他 一 些 东西 。 换 名 话说， 
失去 了 还 有 可 能 完成 它 的 所 有 希望。 每 次 表单 增长 一 些 ， 你 的 心 就 会 下 
沉 一 些 。 泪 丧 感 很 快 就 会 出 现 ， 随 之 而 来 的 则 是 焦虑 。 


而 具有 讽刺 意味 的 是 ， 这 个 表单 完整 打印 出 来 其 实 也 就 只 有 两 页 纸 那么 
长 。 只 是 因为 网 页 的 这 种 设计 才 会 使 它 让 人 觉得 无 法 完成 。 
我 的 客户 希望 知道 如 何 能 够 改进 它 。 我 要 了 一 杯 双 份 摩卡 咖啡 、 一 大 堆 
马克 笔 、 一 块 巨 大 的 和 白板， 然后 还 有 一 根 粗大 的 牛皮 鞭 。 


好 吧 ， 我 是 有 点 夸张 ， 但 也 只 有 一 点 而 已 。 
C16.1 清晰 的 预期 


通过 减少 完成 表单 所 需要 的 页 面 数 (并 且 应 用 了 一 种 我 不 太 认 可 的 渐进 
展现 方式 )， 我 的 客户 成 功 地 把 所 有 东西 归结 为 一 个 界面 。 但 是 与 此 同 
时 ， 他 们 也 使 用 户 无 法 对 整个 过 程 建立 任何 一 种 期 望 。 页 面 中 没有 任何 
东西 能 帮助 用 户 预 知 将 被 这 个 罗网 困 住 的 时 间 。 这 并 没有 让 表单 显得 更 
加 简单， 反而 让 人 感到 更 加 复杂 。 

我 们 的 目标 不 应 该 是 把 所 有 东西 都 放 在 一 个 界面 里 。 正 确 的 目标 应 该 是 
使 用 户 相 信和 表单 并 没有 实际 的 那么 复杂 。 不 是 欺骗 或 轧 弄 他 们 ， 而 是 创 
建 一 种 简单 的 印象 ， 使 得 表单 给 人 感觉 不 那么 复杂 ， 从 而 在 填写 时 不 那 
么 痛 蔡 。 

最 后 ， 我 选用 了 一 种 设计 ， 在 整个 过 程 的 每 一 步 都 建立 起 清晰 的 预期 使 
之 更 加 友好 ， 并 且 让 整个 表单 感觉 不 像 实际 那么 麻烦 。 

首先 ， 我 把 表单 分 解 成 好 几 个 页 面 ， 并 且 添 加 了 一 个 步骤 进度 条 ， 把 整 
个 表单 变 成 了 一 个 Wizard 疝 导 。 这 么 做 的 目的 是 对 每 个 步 又 中 用 户 需 要 
填写 的 内 容 有 一 个 清晰 的 指示 ， 并 且 让 用 户 随 时 了 解 还 剩 下 多 少 个 步骤 。 
其 次 ， 我 去 掉 了 多 余 的 表单 域 ， 以 避免 用 户 在 多 处 重复 输入 相同 的 信息 。 


然而 ， 真 正 的 工作 其 实 是 考虑 如 何在 第 一 页 就 建立 清晰 的 预期 。 毕 竞 ， 
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如 果 得 不 到 一 开始 几 个 问题 的 答案 ， 我 们 也 没 办 法 告诉 用 户 他 们 即将 进 
入 的 是 什么 。 

我 以 该 表单 原始 版 本 中 同样 的 3 个 问题 开始 。 我 的 想法 
Wizard 的 第 一 步 ， 如 图 16-1 所 示 。 





[ou 
波 
3 
a 
[ou 


Do you, your spouse, or your dependents have any Group Medical, 
Dental, or Vision coverage through an Employer other than your 
coverage with Acme Insurance? 


@@ Yes 
@No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicare? 


© Yes 
@ No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicaid? 


© Yes 
图 No 


ere 





16-1 


很 快 我 意识 到 这 里 的 信息 还 不 够 以 确定 Wizard 的 样子 。 为 了 动态 地 创建 
Wizard 向 导 ， 我 不 仅 需 要 知道 用 户 是 否 从 其 他 公司 购买 过 保险 ， 还 需要 
知道 他 是 否 购买 了 医疗 、 牙 科 或 眼科 的 保险 项 目 。 因 此 我 添加 了 一 个 复 
选 框 来 获得 这 一 信息 ， 见 图 16-2。 


为 了 让 事情 更 简单 点 ， 我 决定 如 果 用 户 选 中 了 这 3 个 复 选 框 中 的 任 
何 一 个 ， 那 个 Yes 单 选 按钮 也 会 自动 选中 。 这 样 使 得 表单 变 成 了 一 种 
“Conditional Form”。 这 种 表单 中 ， 用 户 对 某 个 选项 的 选择 可 能 会 使 其 他 
元 素 被 激活 或 者 失效 。 
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Do you, your spouse, or your dependents have any Group Medical, 
Dental, or Vision coverage through an Employer other than your 
coverage with Acme Insurance? 


@ Yes 
国 Medical 国 Dental 图 Vision 
© No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicare? 


© Yes 
时 No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicaid? 


© Yes 
@@No 


[Getstared | 





图 16-2 


不 过 在 做 这 个 决定 的 过 程 中 ， 我 发 现 根 本 就 没 必要 显示 单 选 按 钮 。 如 果 
用 户 购买 过 这 里 面 任何 一 种 保险 ， 那 么 答案 自然 是 Yes。 如 果 他 没有 这 些 
保险 ， 答 案 则 肯定 是 No。 因 此 我 直接 把 第 一 题 的 单 选 按钮 全 部 去 掉 ， 如 
图 16-3 所 示 。 


延续 这 种 思路 ， 我 意识 到 没有 理由 要 用 户 去 为 任何 问题 选择 No。 后 续 的 
Wizard 向 导 过 程 只 有 在 答案 为 Yes 时 才 会 增加 内 容 。 因 此 我 决定 摆脱 掉 
所 有 剩 下 的 单 选 按钮 ， 并 且 把 问题 变 成 了 复 选 框 选 项 ， 如 图 16-4 所 示 。 
这 样 一 来 ， 那 些 没 有 从 其 他 公司 购买 过 保险 的 用 户 只 需要 单 击 Get Started 
《开始 ) 按钮 ， 不 需要 其 他 任何 动作 。 在 原始 的 设计 中 ， 用 户 则 必须 要 为 
每 一 道 问题 选择 No 的 单 选 按钮 。 因 此 这 个 新 设计 需要 花费 的 努力 更 少 。 
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Do you, your spouse, or your dependents have any Group Medical, 
Dental, or Vision coverage through an Employer other than your 
coverage with Acme Insurance? 


回 Medical Dental [Vision 


Do you, your spouse, or your dependents, have medical coverage 
with Medicare? 


© Yes 
加 No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicaid? 


© Yes 
时 No 


etstaned | 





16-3 


Other insurance 


|, my spouse, or my dependents hasihave Group Medical, Dental, 
or Vision coverage through an Employer other than your coverage 
with Acme Insurance. {Choose all that apply.} 


国 Medical 国 Dental 国 | Vision 


Medicare 


加 1, my spouse, or my dependents has/have medical coverage 
with Medicare， 


Medicaid 


圆 1, my spouse, or my dependents has/have medical coverage 
with Medicaid 


| Getstared | 





16-4 


最 后 一 个 小 花招 ， 是 第 一 时 间 就 告 诉 用户 在 完成 表征 的 过 寸 程 中 将 会 需要 
哪些 信息 。 这 样 他 们 就 能 在 开始 填写 之 前 就 事先 准备 好 ， 而 不 会 在 填写 
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16.1 清晰 的 预期 125 
过 程 中 感觉 受 了 欺骗 。 


为 了 做 到 这 一 成 ， 我 在 表单 顶部 深 加 了 一 一 些 说 明 性 文字 ， 把 每 一 条 必需 
的 信息 列 成 项 目 列表 的 形式 "， 这 样 更 能 鼓励 用 户 快速 阅读 。 见 图 16-5。 





ff you have insurance through another provider, you may need to 
have the following iniormation handy to complete this application: 


se Statement of coverage from your current insurance provider 
sa Effective dates and/or end dates for each type of coverage 
se Policy numbers for each policy 


Other insurance 


1 my spouse, or my dependents hasihave Group Medical, Dental, 
or Vision coverage through an Employer other than your coverage 
with Acme Insurance. {Choose all that apply) 


国 Medical 国 Dental 国 Vision 


Medicare 


口 I, my spouse, or my dependents has/have medical coverage 
with Medicare， 


Medicaid 





I, my spouse, or my dependents has/have medical coverage 
with Medicaid. 





Getstared  ) 





图 16-5 


乍 看 上 去 ， 新 的 设计 似乎 还 没有 最 初 的 版 本 那样 干净 简单 ， 但 是 现在 完 
成 它 所 需要 的 精力 更 少 。 同 时 一 开始 我 们 就 为 它 建立 了 清晰 的 预期 ， 而 
被 划分 为 多 个 步 又 也 使 之 不 再 难以 把 握 。 


并 不 是 所 有 的 交互 都 能 够 简化 。 但 我 们 却 可 以 让 它们 看 上 去 更 容易 。 建 
立 清 晰 的 预期 ， 并 且 把 复杂 的 过 程 分 解 成 能 一 口 口 干 掉 的 小 块 ， 即 使 最 
复杂 的 交互 也 便于 控制 了 。 














四 





该 处 的 中 文 翻译 如 下 。 
“如 果 您 从 其 他 公司 购买 过 保险 ， 完 成 此 表单 可 能 手边 需要 有 如 下 信息 : 
® 从 其 他 担保 方 购买 的 保险 项 目 详细 信息 
e@ 各 保险 项 目的 生效 日 期 和 终止 日 期 
e 各 保险 项 目的 保单 号 ”一 一 译 者 注 
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第 17 章 
让 他 们 登录 





我 和 Kris Hadlock 以 33 Inc2 的 名 义 合作 开发 Dashboard HQ“ 时 ， 我 们 
真 的 很 希望 把 它 做 成 一 款 伟 大 的 、 面 向 全 世界 的 在 线 书签 管理 工具 。 现 
在 我 仍然 相信 这 是 一 款 伟 大 的 工具 。 但 当 它 发 布 时 ， 网 络 社区 正 风 行 一 
时 ， 而 我 们 这 个 小 程序 并 没有 什么 社区 特性 ， 因 此 它 没 有 跟 上 潮流 。 最 
后 我 们 还 是 取消 了 扩展 Dashboard HQ 的 计划 。 


但 不 管 怎么 说 ， 这 款 应 用 依然 存在 着 。 到 今天 我 仍 把 它 作 为 自己 浏览 器 
的 主页 面 ， 而 且 它 工作 得 仍然 相当 棒 。 


它 的 诸多 好 处 之 一 就 是 登录 流程 非常 简单 方便 。 而 在 其 他 大 多 数 Web 应 
用 中 ， 通 常 让 人 头疼 的 是 : 你 需要 记 住 你 的 用 户 名 和 密码 。 


在 Web 应 用 中 登录 难 就 难 在 这 里 。 如 果 碰 巧 你 知道 自己 的 用 户 名 和 密 
码 ， 或 者 设置 浏览 需 为 你 记 住 它们 ， 那 么 这 个 过 程 非常 简单 。 但 如 果 发 
现 其 中 有 一 个 不 正确 ， 你 可 能 就 得 费 好 大 劲 来 找 回 你 需要 的 信息 ， 而 这 
个 过 程 可 不 令 人 愉快 。 


试图 重新 找 回 用 户 名 或 者 密码 时 ， 很 多 网 站 都 有 一 些 多 余 的 步骤 。 比 如 
说 ， 在 使 用 了 正确 的 用 户 名 尝试 登录 了 数 次 之 后 ， 最 后 你 意识 到 自己 真 
的 忘掉 了 密码 ， 于 是 单 击 了 Forgot Password ? (忘记 密码 ? ) 链接 ， 
然后 被 带 到 一 个 新 页 面 ， 而 在 这 里 你 必须 再 次 输入 你 的 用 户 名 。 





























































































































Q@ 这 位 设计 师 在 第 15 章 已 经 出 现 过 了 。 一 一 译 者 注 
@) 33 Inc 是 一 个 从 事 Web 应 用 开发 的 二 人 团队 ， 其 成 员 也 就 是 本 书 作者 Robert Hoek- 
man, Jr. 和 Kris Hadlock。 网 站 地 址 为 http://www.33inc.com/。 译 者 注 
G@) Dashboard HQ 是 一 款 基 于 Web 的 软件 ， 由 33 Inc 开发 。 用 户 能 够 把 自己 单位 、 家 
庭 电脑 和 笔记 本 中 的 收藏 网 页 都 集中 到 一 个 单独 的 页 面 上 ， 这 样 从 任何 终端 都 能 通 
过 网 络 进行 访问 。 该 产品 也 能 让 用 户 通过 简单 的 操作 对 网 页 书签 进行 添加 或 编辑 。 
网 站 地 址 为 http:/www.dashboardhq.com/〔( 目 前 国内 无 法 登录 )。 译 者 注 
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因为 系统 需要 先知 道 你 的 用 户 和 名 ， 和 否则 它们 什么 都 帮 不 了 。 而 它们 又 无 
法 确定 你 先前 登录 时 输入 的 用 户 名 是 否 正 确 。 因 此 ， 你 必须 再 次 输入 一 
壳 。 一 旦 它们 知道 了 用 户 名 ， 通 常 就 会 通过 邮件 把 现 有 的 密码 发 送 给 你 ， 
或 者 给 你 另外 一 个 链接 去 创建 新 密码 。 


很 麻烦 ， 不 是 吗 ? 


在 试图 改进 这 个 古老 的 标准 方案 以 便 让 它 更 有 意思 时 ， 我 们 问 了 自己 一 
个 简单 的 问题 。 


如 果 系 统 已 经 知道 了 你 的 用 户 名 ， 又 会 怎样 ? 
C17.1 再 一 次 改进 标准 


如 果 系 统 已 经 知道 了 你 的 用 户 名 ， 你 便 无 需 专门 跑 到 另 一 个 页 面 去 输入 
它 ， 然 后 告诉 系统 把 密码 发 给 你 。 因 为 系统 能 很 快 做 到 这 一 点 ， 而 不 需要 
你 付出 任何 额外 的 努力 。 也 正 因为 如 此 ， 这 个 Forgot Password ? 的 新 页 面 
也 不 是 很 必要 了 ， 并 且 登 录 页 面 只 需 一 个 链接 就 能 把 密码 直接 发 送 给 你 。 


17.1.1 网 络 用 户 名 与 用 户 姓 名 
为 了 实现 这 一 想法 ， 我 们 对 系统 进行 了 设计 使 得 用 户 名 成 为 登录 网 站 时 
使 用 的 URL 地 址 的 一 部 分 。 


这 样 一 来 ， 用 户 收 藏 的 不 是 首页 ， 而 是 他 自己 的 个 人 登录 页 。 如 果 他 的 
用 户 名 是 John， 那 么 他 直接 在 www.dashboardhq.com/john 的 页 面 登录 。 
如 果 在 他 登录 后 进入 这 个 页 面 ， 那 么 将 自动 转向 他 自己 的 Dashboard HQ 
首页 。 如 果 没 有 ， 他 只 需要 输入 密码 即 可 。 看 看 图 17-1 吧 。 


如 果 碰 巧 某 位 用 户 和 其 他 人 共用 一 台电 脑 ， 他 可 能 会 发 现 自己 正 上 隘 着 一 
个 不 属于 他 自己 的 登录 页 面 。 有 一 个 小 小 的 链接 用 于 应 付 这 种 情况 : I 
am not John〔 我 不 是 John)。 单 击 这 个 链接 时 ， 本 来 显示 的 用 户 名 将 会 转 
变 成 一 个 输入 域 ， 这 样 他 就 能 输入 自己 的 用 户 名 了 。 


这 里 的 想法 非常 简单 。 既 然 我 们 能 做 到 这 一 点 ， 为 什么 还 得 要 求 那 些 
“ 熟 客 ” 记 住 自己 的 用 户 名 呢 ? 

不 像 大 多 数 其 他 登录 页 面 那样 强迫 用 户 每 次 都 输入 用 户 名 ， 我 们 提供 了 
一 些 额 外 的 东西 来 减弱 记 住 用 户 名 的 注音 。 
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mashboamed MA 


Username: john lam not john 





Password: 


日 Remember me for two weeks 


Not registered? 








图 17-1 


而 正 因为 已 经 知道 了 用 户 名 ， 因 此 某 位 用 户 单 击 Forgot Password ? 的 
链接 时 ， 我 们 不 再 需要 把 他 送 到 男 一 个 界面 再 次 输入 自己 的 用 户 名 。 单 
击 这 个 链接 只 会 在 后 台 给 该 用 户 记 录 中 的 邮箱 地 址 发 送 一 封包 含 密码 的 
电子 邮件 ， 同 时 在 登录 页 面 显 示 一 条 简单 的 信息 告诉 用 户 密码 已 经 发 送 。 


17.1.2 ”更 上 一 层 楼 


在 IxXDA (Interaction Design Association， 交 互 设计 协会 ) "网 站 活跃 的 讨 
论 组 名 单 中 ， 很 多 成 员 都 把 它 当 作 自 己 的 网 上 家 园 。 设 计 这 个 网 站 的 那 
帮 有 家 伙 在 简化 登录 流程 方面 迈 出 了 更 大 的 一 步 ”。 

实际 上 ， 这 个 网 站 甚至 都 不 需要 密码 。 

如 图 17-2 所 示 ， 你 所 要 做 的 只 是 输入 你 的 名 字 和 注册 时 所 用 的 电子 邮件 
地 址 。 如 果 你 记 不 住 在 注册 时 所 使 用 的 名 字 格 式 〈 只 有 名 字 、 名 和 姓 都 
有 、 或 者 其 他 什么 组 合 方式 ) 也 不 用 烦恼 。 网 站 把 你 的 电子 邮件 地 址 作 
为 第 一 辨识 规则 ， 同 时 适 配 你 在 数据 库存 档 中 名 字 的 任意 格式 。 























QD IxDA 是 一 个 2003 年 成 立 的 非 伍 利 性 专业 协会 ， 目 前 约 有 1500 名 来 自 世 界 各 地 
的 协会 成 员 ， 致 力 于 满足 国际 交互 设计 业界 的 需求 。 网 站 地 址 为 http://www.ixda. 
org。 一 一 译 者 注 

@) 该 网 站 的 登录 页 面 见 http://www.ixda.org/profile.php。 一 一 译 者 注 
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Your Name 


Robert 


Subscription E-mail 


robert@miskeeto.com 


Sign In What about passwords? 





图 17-2 


比如 说 ， 我 用 Robert Hoekman, 工 . 的 名 字 注 册 ， 如 果 我 在 Your Name〔 你 
的 名 字 ) 一 栏 中 只 键入 Robert， 我 仍然 能 够 登录 。 而 如 果 我 键入 了 一 个 
我 没 使 用 过 的 名 字 ， 比 如 说 Joe， 就 会 得 到 一 条 错误 信息 ， 如 图 17-3 所 
示 s 





This name and e-mail address do not match. Please use the 
name you're known by on the IxDA discussion list. 


Your Name 


Joe 


Subscription E-mail 
robert@rhjr.net 





Sign In What about passwords? 





图 17-3 


这 让 我 感到 在 没有 密码 的 情况 下 ， 自 己 的 账户 也 还 算 有 一 点 安全 性 。 但 
如 果 我 用 讨论 组 其 他 成 员 的 名 字 和 电子 邮件 地 址 登录 会 怎样 ? 我 认识 不 
少 成 员 ， 所 以 这 很 容易 办 到 。 我 能 轻易 登录 并 扮 成 那个 人 来 发 表 文 章 
吗 ? 


呢 ， 不 行 。 当 我 试 着 这 么 做 时 ， 系 统 显 示 了 一 条 信息 表示 我 在 之 前 从 未 
用 这 台电 脑 或 网 段 登录 过 ， 因 此 一 条 确认 请 求 已 经 被 发 送 到 了 我 输入 的 
那个 电子 邮件 地 址 。 


噢 哦 。 硕 望 我 测试 的 那个 电子 邮件 主人 不 要 认为 我 在 盗 取 他 的 账号 。 
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IxDA 的 解决 方案 并 不 一 定 适合 所 有 的 Web 应 用 : 它 仍 然 不 如 密码 那么 
安全 。 

同时 ， 输 入 网 络 用 户 名 是 一 个 非常 普遍 的 习性 ， 很 多 登录 的 用 户 会 在 
Your Name 一 栏 中 输入 自己 的 网 络 用 户 名 ， 而 实际 上 他 们 需要 键入 的 是 
自己 真正 的 名 字 。 违 背 了 用 户 的 通常 习惯 ， 将 会 使 本 已 简化 的 登录 流程 
反而 比 传统 的 设计 需要 付出 更 多 的 思考 。 尤 其 是 用 户 并 不 知道 可 以 用 任 
意 格式 来 输入 自己 的 名 字 。 这 会 使 得 他 们 犹豫 是 否 需 要 把 名 字 输 入 得 完 
全 与 注册 时 一 模 一 样 。 
但 除了 这 些 之 外 ，IxDA 的 登录 过 程 是 一 次 伟大 的 尝试 。 设 计 师 们 积极 地 
挑战 标准 ， 不 断 探 索 如 何 改 进 ， 而 不 是 犹豫 不 决 。 

标准 绝 不 是 永恒 不 变 的 。 事 实 上 ， 绝 大 多 数 时 间 里 ， 在 某 些 人 刚 树 立 起 


标准 的 下 一 秒 钟 它们 就 改变 了 。 用 朵 新 的 眼光 看 待 那些 公认 为 陈腐 的 事 
物 ， 这 对 于 任何 产品 都 是 改进 其 用 户 体验 的 一 种 极 佳 方式 。 
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打 桌 球 时 有 各 种 方式 能 赢得 比赛 。 最 可 笔 的 方式 是 日 以 继 夜 地 磨 练 你 的 








击 球 动 作 、 纠 正 你 的 姿势 、 研 读 各 种 战术 ， 同 时 坚持 不 懈 地 学 习 应 对 各 


种 困境 。 这 是 那些 职业 选手 的 做 法 。 他 们 花费 数 年 时 间 反 复 训练 ， 和 那 
些 更 高 水 平 的 选手 比赛 ， 然 后 把 自己 推 向 更 高 峰 。 

而 如 果 不 那 么 稳扎稳打 却 同样 有 效 的 方式 则 是 学 习 基础 的 击 球 、 姿 势 和 
战术 ， 然 后 成 为 一 个 有 良好 控制 能 力 的 不 错 玩家 。 在 这 里 没有 那 种 职 ， 
桌球 选手 的 渴望 ， 只 是 一 种 稳固 的 实力 ， 然 而 它 却 能 击败 在 酒吧 挑战 你 























的 大 多 数 对 手 。 











最 不 可 靠 的 方法 则 是 绝 大 多 数 人 学 习 并 且 一 直 和 尝试 的 ， 也 就 是 poke-and- 
hope〈 打 了 再 说 ) 方式 。 这 意味 着 你 猛 地 朝 白 球 出 杆 ， 然 后 希望 有 什么 


球 能 碰巧 落 袋 。 





初学 者 基本 上 都 依靠 poke-and-hope。 更 高 级 的 桌球 玩家 偶尔 在 某 种 形势 


下 也 需要 这 种 方式 。 职 业 选 手 最少 ， 但 也 仍然 发 生 。 








和 大 多 数 桌球 初学 者 一 样 ， 大 多 数 电脑 用 户 也 没有 学 习 过 有 效 使 用 电脑 
的 基础 概念 和 技巧 。 这 很 自然 ， 因 为 他 们 有 很 多 比 熟 练 掌握 个 人 电脑 更 





























好 的 事情 要 去 做 ， 就 像 有 很 多 比 成 为 桌球 大 师 更 好 的 事情 要 去 做 一 样 。 


不 管 怎 样 ， 这 带 来 了 各 种 各 样 的 问题 。 人 们 在 网 站 上 右 击 ， 在 弹出 的 环 
境 全 单 中 寻找 与 任务 有 关 的 选项 。 他 们 在 浏览 需 的 地 址 栏 里 输入 电子 邮 
件 地 址 ， 然 后 奇怪 为 什么 他 们 的 电子 邮件 不 出 现 。 他 们 在 显示 顺 屏 幕 前 
举 着 一 张 纸 ， 然 后 奇怪 为 什么 不 能 扫描 。 而 更 经 常 的 是 ， 他 们 在 某 个 表 
单 底部 单 击 Submit《〈 提 交 ) 按钮 ， 然 后 祈祷 全 部 填写 正确 ， 这样 就 不 会 















































看 到 一 堆 讨 大 的 出 错 信 息 让 他 们 感觉 自己 是 个 笨重 。 








换 句 话 说， 他 们 是 在 poke-and-hope。 
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如 果 你 是 一 个 靠 poke-and-hope 瞎 蒙 的 桌球 玩家 ， 也 许 就 能 够 体会 到 大 多 
数 人 使 用 在 线 软件 的 感觉 了 。 在 那里 没有 技巧 、 没 有 基础 、 没 有 深奥 的 
知识 ;在 那里 只 有 筷 切 的 希望 ， 无 论 出 杆 怎样 ， 都 希望 自己 能 更 靠近 一 
步 ， 从 而 窃取 1~2 场 胜利 。 


治疗 这 一 切 的 良 方 就 是 poka-yoke 机 制 ( 后 文 会 继续 详 述 )。 


在 Web 应 用 中 消除 错误 的 可 能 性 意味 着 poke-and-hope 用 户 现在 可 以 不 
再 像 低能 儿 那 样 使 用 产品 了 ， 即 使 他 们 几乎 完全 不 知道 网 络 到 底 是 如 何 
工作 的 ， 即 使 他 们 以 为 正 浏 览 器 的 “帮助 ”菜单 也 包含 产品 的 信息 ， 即 
使 他 们 在 网 站 的 搜索 栏 里 输入 URL 地 址 然后 期 待 新 网 站 会 自动 出 现 。 


改进 Web 应 用 所 能 做 的 最 重要 的 一 件 事 就 是 减少 出 错 的 可 能 性 。 现 在 如 
此 ， 以 后 也 -一样 。 不 会 出 错 的 用 户 感觉 自己 聪慧 、 备 受 尊重 、 有 成 效 。 


聪 恶 、 备 受 尊重 、 有 成 效 的 用 户 是 整个 世界 上 最 好 的 用 户 ， 因 为 他 们 会 
告诉 其 他 人 使 用 你 们 产品 时 的 美妙 感觉 。 这 是 最 好 的 市 场 营销 。 


如 果 你 希望 人 们 也 能 这 样 谈 论 你 的 产品 ， 那 么 一 开始 最 好 的 办 法 就 是 把 
poke-and-hope 转变 成 poka-yoke。 


尝试 在 每 一 款 产品 的 设计 中 都 做 到 这 一 点 ， 因 此 当 我 坐 下 来 写 这 一 章 
时 ， 手 里 握 着 一 大 堆 例 子 。 我 选择 了 一 个 很 常见 的 问题 做 例子 : 带 字数 
限制 的 输入 域 。 


C18.1 到 达 限 制 


有 很 多 表单 域 都 需要 字数 限制 。 比 如 说 ， 在 某 个 创建 密码 的 输入 域 中 就 
只 能 输入 8~10 个 字符 。 


每 当 我 需要 创建 一 个 带 字 数 限制 的 表单 域 时 ， 几 乎 都 会 使 用 同样 的 方式 。 
因为 在 我 第 一 次 设计 表单 域 时 ， 便 游历 了 各 种 不 同 的 网 站 ， 研 究 我 所 能 
找到 的 每 一 个 类 似 情 况 ， 并 且 记 录 它 们 的 工作 方式 ， 最 后 得 出 我 认为 是 
最 好 的 设计 方案 。 而 当 自 己 的 方案 并 不 合适 时 ， 我 仍然 需要 去 寻找 其 他 
一 些 实例 。 


我 知道 你 正在 疑惑 为 什么 我 会 纠 强 于 这 样 一 个 简单 又 平凡 的 细节 ， 对 
吧 ? 毕 竞 这 不 是 一 个 很 困难 的 界面 问题 ， 甚 至 它 都 不 值得 真正 去 考虑 。 
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但 在 你 下 结论 之 前 ， 想 想 以 前 曾 遇 到 过 的 那些 受 限制 的 表单 域 吧 。 





Title 








| 1can only enter a certain number of characters into this field. 








图 18-1 


如 图 18-1 所 示 ， 你 在 某 个 受 限 表单 域 中 输入 了 一 条 完整 的 字符 串 ， 提 交 
表单 ， 然 后 看 到 如 图 18-2 这 样 一 条 信息 : You can enter no more than 50 
characters.〈 你 只 能 输入 50 个 字符 。) 


Thtle 


lcan only enter a certain number of characters into this field. 





You can enter no more than 50 characters， 





图 18-2 


自然 ， 这 个 限制 会 迫使 你 一 个 字 一 个 字 地 去 数 已 经 输入 的 字符 ， 然 后 考 
虑 如 何 调整 以 减少 字数 来 满足 条 件 。 而 这 是 一 个 兄长 、 乏 味 又 糟糕 的 事 
情 ， 还 不 能 不 做 。 于 是 你 感到 愤怒 ， 而 且 由 于 不 知道 空格 是 否 应 该 计算 
在 内 ， 你 对 自己 的 计算 结果 是 否 精确 也 毫 无 自信 了 。 


而 男 一 种 常见 的 情况 是 ， 你 快乐 地 一 直 打 着 字 ， 结 果 却 发 现 键盘 出 了 毛 
病 。 

如 图 18-3 所 示 ， 你 键入 了 整整 一 篇 小 说 ， 结 果 却 发 现 最 后 200 个 字符 根 
本 没有 输 进去 。 为 了 找 出 是 哪里 出 了 毛病 ， 也 许 你 会 打开 男 一 个 程序 输 
入 某 些 东西 以 确保 你 的 键盘 仍然 正常 ， 也 许 你 会 到 电脑 背后 检查 键盘 的 
USB 插口 是 否 松 控 了， 我 自己 就 曾经 干 过 。 



































Title 





[ lcan only enter a certain number of characters into this fie 








图 18-3 
就 像 这 样 ， 一 个 普通 的 输入 域 会 让 你 怀疑 整 台 电脑 发 生 了 故障 。 
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悲 衰 。 

这 就 是 你 想 为 用 户 创 造 的 瞬间 吗 ? 我 不 这 么 想 。 幸 运 的 是 ， 这 个 问题 很 
好 解决 。 

18.1.1 编辑 中 的 poka-yoke 

我 们 只 需要 一 个 简单 的 方式 让 用 户 知道 发 生 了 什么 。 首 先 ， 让 他 们 知道 
这 里 有 字数 限制 ， 其 次 ， 让 他 们 知道 何 时 会 到 达 这 个 限制 。 


poka-yoke 可 以 拯救 你 ! 就 如 我 在 Designing the Obvious 一 书 中 所 说 ， 
poka-yoke 是 一 个 日 语词 汇 ， 意 思 是 “防止 错误 ”。 其 含义 有 二 : 侦 测 机 
制 和 预防 机 制 。 我 很 乐于 找到 办 法 在 网 上 应 用 这 个 想法 。 


侦 测 机 制 就 是 让 用 户 知道 有 错误 发 生 ， 并 且 使 他 能 够 立刻 修正 。 各 种 出 
错 信息 都 属于 poka-yoke 的 侦 测 机 制 。 
而 预防 机 制 则 表示 在 一 开始 就 避免 错误 发 生 ， 并 且 受 限 表单 域 就 是 实践 
这 一 想法 的 好 地 方 。 
最 简单 的 解决 方案 就 是 加 上 一 条 说 明 性 文字 ， 向 用 户 解释 这 里 的 字数 不 
能 超过 50 个 字符 。 如 图 18-4 所 示 。 






































Title 
1can only enter a certain number of characters into this fie 














Enter up to 50 characters, 





18-4 


这 能 让 用 户 知 道 限制 条 件 ， 所 以 他 们 就 不 会 疑惑 为 什么 键盘 突然 失灵 了 。 
但 如 果 在 到 达 限 制 时 没有 任何 提示 ， 他 们 仍然 需要 计算 字符 数 : 
“I can only enter” .………: 让 我 们 看 看 i 这 里 有 13 个 字符 ， 所 以 CT 我 还 


能 再 输入 37 个 。 好 ……… ‘a certain number” .……… ， 现 在 多 少 个 了 ? 还 有 
空格 应 该 算 进去 吗 ? 噢 ， 真 讨 大 。” 


为 了 在 这 段 说 明文 字 中 加 强 poka-yoke 机 制 ， 我 把 文本 中 的 数字 50 改 成 
了 一 个 不 断 减 少 的 变量 。 
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如 图 18-5 所 示 ， 现 在 当 用 户 输 入 时 ， 每 增加 一 个 字符 这 个 数字 就 会 减 
少 。 用 户 能 在 整个 输入 过 程 中 确切 地 了 解 自 己 还 能 输入 多 少 字符 。 当 然 ， 
如 果 删 除 字符 ， 这 个 数字 就 会 增加 。 


Title 
[lean only enter a cer 








You can enter up to 33 more characters. 





18-5 


见 图 18-6， 即 使 他 到 达 0 后， 也 仍然 能 继续 调整 输入 的 文字 。 


Title 


lcan only enter a certain number of characters into this fie 





You can enter up to 0 more characters. 





图 18-6 


整理 好 这 一 设计 之 后 ， 我 立刻 将 其 设 制 为 一 条 标准 ， 还 发 表 了 一 篇 关于 
它 的 博客 。 


而 就 在 那 时 有 人 指出 这 个 设计 还 有 点 小 问题 。 

对 于 使 用 屏幕 阅读 器 的 用 户 来 说 ， 因 为 屏幕 阅读 器 是 按 上 下 顺序 来 阅读 
页 面 的 ， 所 以 这 些 用 户 只 可 能 在 出 现 问题 之 后 才 会 发 现 这 个 关于 字数 限 
制 的 信息 。 

我 真 策 。 

要 弥补 这 一 点 ， 我 仅仅 只 需 把 这 个 不 断 减少 的 变量 挪 到 表单 域 的 上 方 ， 
见 图 18-7。 





Title 
You can enter up to 33 more characters. 





lcan only enter a cer 





图 18-7 
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没 错 ， 使 用 屏幕 阅读 器 可 能 需要 来 回 地 使 用 Shift 一 Tab， 不 断 地 把 焦点 
切 回 到 该 信息 上 以 得 知 还 剩 下 多 少 个 字符 ， 但 至 少 在 输入 之 前 就 能 了 解 
字数 限制 条 件 ， 而 且 能 随时 检查 当前 的 字符 数 。 


18.1.2 ”一 点 小 警告 


顺带 一 提 ，Twitter 网 站 "在 设计 字符 计数 方面 走 得 更 远 。 一 开始 不 断 减 少 
的 变量 是 灰色 文字 ， 而 一 旦 用 户 输入 字符 数 超过 了 120， 该 变量 就 会 变 
红 ， 提 醒 他 们 还 剩 下 不 到 20 个 字符 了 。 

干 得 很 棒 。 

即使 用 户 在 一 开始 不 会 注意 到 这 个 文本 ， 但 是 通过 颜色 变化 这 种 方式 也 
会 在 输入 时 引起 他 们 的 注意 。 红 色 能 在 绝 大 部 分 网 页 中 凸显 出 来 ， 而 且 
突然 出 现 的 红色 通常 能 打 断 用 户 的 输入 ， 计 他们 注意 到 字符 计数 右 。 

我 对 该 设计 唯一 的 问题 就 是 ， 这 个 字符 计数 器 本 身 没有 相关 的 文本 或 标 
签 来 解释 它 。 如 图 18-8 所 示 ， 只 是 一 个 单独 的 数字 放 在 输入 域 的 右上 
方 。 











NS 











What are you doing? 


Wondering why Twitters character counter has no label. 


update 





图 18-8 
不 管 怎 样 ， 加 入 简单 的 字符 计数 带 便 能 把 一 个 潜在 的 错误 转变 成 男 一 个 
“原来 使 用 这 个 产品 只 需 常识 ”的 瞬间 。 


不 再 迫使 用 户 自 己 逐 字 计 算 字 符 ， 也 避免 了 他 们 在 看 到 出 错 信息 前 白白 
输入 过 多 ， 只 需 添 加 简单 的 字符 计数 器 ， 这 个 交互 就 一 目 了 然 了 。 











GD Twittercom 是 一 个 能 让 朋友 、 家 庭 和 工作 伙伴 之 间 通 过 记录 日 常 琐事 而 随时 保持 联 
系 的 在 线 服 务 。 网 站 地 址 为 http:Wtwittercom/。 一 一 译 者 注 
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互联 网 ， 其 中 很 大 的 一 部 分 乐趣 在 于 参与 。 


我 们 以 前 只 是 被 动 的 浏览 者 ， 现 在 却 可 以 和 其 他 人 联系 交流 、 管 理 和 编 
辑 自己 和 其 他 人 的 信息 、 共 享 想法 、 制 定 计 划 ， 以 及 其 他 各 种 好 玩 的 事 。 


而 今天 你 有 无 数 种 方式 可 以 加 入 进来 ， 并 且 网 络 社交 技术 的 提高 也 使 得 
我 们 可 以 做 任何 事情 。 你 可 以 和 身 处 日 本 的 小 孩 打 扑克 ， 也 可 以 和 正在 
1000 英里 外 出 差 的 朋友 随时 保持 联系 。 


不 过 ， 尽 管用 户 可 以 尽兴 地 为 博客 写 回复 、 在 Facebook "上 交 朋 友 ， 或 
者 通过 某 个 网 站 构建 工具 为 自己 设计 网 页 ， 这 种 种 瞬间 中 都 充斥 着 混淆 、 
丧失 自信 的 可 能 性 。 
在 这 一 部 分 ， 我 会 讲述 一 些 关 于 参与 的 故事 ， 并 讨论 一 些 原 则 ， 和 希望 能 
帮助 你 们 为 用 户 把 这 些 瞬 间 变 得 更 积极 和 易于 理解 。 

后 面 6 章 中， 我 会 论述 为 什么 说 “清楚 ” 比 “ 有 效 ” 更 为 重要 、 如 何 鼓 
励 和 激发 社交 行为 ， 甚 至 说 为 什么 “跟从 ”人 们 在 网 站 的 动向 会 比 成 为 
他 们 的 “朋友 ”更 加 合适 。 


不 管 潜在 的 目的 是 什么 ， 哪 怕 是 最 复杂 的 交互 ， 也 能 变 成 令 人 愉快 的 瞬 
间 。 











mu 









































四 众所周知 ，Facebook 是 一 个 通过 上 传 照片 来 结交 朋友 或 与 亲友 保持 联系 的 在 线 
服务 ， 目 前 其 范围 扩展 到 了 视频 、 游 戏 等 方面 。 网 站 地 址 为 http://www.facebook. 
com/。 一 一 译 者 注 
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第 19 章 
创建 个 人 资料 





在 为 第 1 章 中 平面 设计 师 社区 设计 时 ， 我 遇 到 的 一 个 挑战 就 是 要 构建 一 








单 页 面 。 


套 更 有 意义 的 用 户 个 人 资料 系统 ， 而 不 仅仅 只 是 包含 网 站 成 员 信息 的 简 


我 所 做 的 并 不 算 什 么 革命 或 创新 ， 但 它 是 一 个 很 好 的 例子 ， 说 明了 应 用 
程序 本 身 的 设计 确实 能 够 影响 到 用 户 所 需 的 信息 类 型 。 

在 很 多 网 站 里 ， 用 户 的 个 人 资料 包含 了 他 们 的 一 些 重要 信息 ， 比 如 他 的 
名 字 、 网 站 URL 地 址 、 即 时 消息 信息 ， 可 能 还 包括 他 的 兴趣 爱好 ， 以 及 
为 什么 加 入 这 个 网 站 的 简介 。 这 种 设计 对 于 其 他 网 站 成 员 来 说 并 不 一 定 

















很 有 帮助 ， 因 为 它 只 是 存放 了 该 用 户 的 这 些 信息 而 已 ， 成 员 相互 之 间 并 
没有 得 到 推介 。 然 而 一 定 程度 上 的 温暖 感 仍然 能 诱 使 一 些 新 用 户 花 费 宝 
贵 的 时 间 输 入 这 些 细节 信息 。 


然而 ， 在 这 个 平面 设计 师 的 社区 中 ， 我 们 知道 有 一 些 不 同 种 类 的 用 户 ， 
比如 设计 师 ， 以 及 那些 需要 设计 师 合 作 的 人 《客户 )。 我 们 还 知道 ， 经 党 




















有 些 用 户 喜 欢 研究 其 他 用 户 收 藏 的 最 喜爱 项 目 案例 、 评 论 回复 以 及 个 人 
上 传 的 案例 ， 和 希望 这 些 能 让 他 们 看 到 更 多 好 的 内 容 。 比 如 说 ， 当 Josh 很 














中 意 某 个 项 目 案例 时 ， 他 很 可 能 还 希望 看 到 该 设计 师 的 其 他 案例 。 同 样 











地 ，Josh 可 能 还 会 尘 


意 到 另 一 位 客户 Sarah 在 某 个 项 目 上 给 的 费用 很 高 ， 








那么 他 也 许 会 想 看 看 与 Sarah 合作 的 那些 设计 师 。 





为 了 满足 这 些 需求 ， 





首先 我 们 将 创建 资料 的 过 程 分 层 ， 然 后 设计 了 一 种 











能 自动 变化 的 个 人 资料 页 面 ， 让 它 能 动态 地 记录 用 户 在 网 站 上 的 行为 ， 
就 好 像 汽车 的 仪表 盘 一 般 。 


让 我 来 解释 一 下 。 
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C19.1 递 进 地 增加 
决定 在 本 网 站 注册 的 每 一 位 用 户 都 会 被 要 求 填 写 基本 的 个 人 资料 信息 ， 


它们 包括 用 户 的 姓名 、 电 子 邮 件 地 址 、 密 码 以 及 信用 卡 信 息 。 如 图 19-1 
所 示 。 


Sign out | My Account | Contact Us | Help 























Artist, category project. etc. Edit profile 
General 

My Account First name: 

Inbox {5) 

Prolects (2) Last name: 

Blds (14) 

Pas Email address: 

Create agallery 6.9. me@mydomain.com 

Wirite journal entry 

Visitthe forums 

人 tc Change password 








New password: 








Coniirm new password: 








Credit card information 
Name on card: 




















Card #: 
Expiration: Security code: 
中 加 [or 同 | | 和 





Cancel 





图 19-1 


然而 ， 平面 设计 师 则 必须 再 做 一 些 其 他 用 户 不 需要 做 的 事情 ， 例 如 创建 
个 人 案例 集 、 标 明 工 作 费 用 以 及 职能 范围 ， 还 有 指定 自己 的 专业 领域 。 

为 了 做 到 这 一 点 ， 我 们 使 用 了 分 层 的 方式 。 任 何 创建 案例 集 的 人 都 需要 
填写 一 些 额 外 信息 ， 而 填写 的 内 容 将 会 添加 到 他 们 的 个 人 资料 中 。 这 些 
信息 只 面向 那些 试图 通过 本 网 站 推销 自己 的 设计 师 。 如 图 19-2 所 示 。 
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因为 上 只 有 平面 设计 师 才 需要 输入 这 些 信 息 ， 所 以 我 们 把 它们 放 到 了 注册 
程序 之 外 。 简 单 来 说 ， 我 们 不 希望 登录 用 户 感觉 只 有 设计 师 才 能 注册 。 


Sign out | My Account | Contact Us | Help 















































Artist, category project, etc Tell us about your services 
This information will appear as part of your profile from now on. 
— Rateandavallabllity 
My Account Rate: 
Inbox {5) S000 |per [hour 形 
Projects (2) Availability: 
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Visltthe forums 
BC Your specialties: 
Enter as many as you want. 
Graphic design|$ 

















Add another specialty 


Additional comments 
Tell us more about yourself: 











ED cm 





图 19-2 
那些 招募 设计 师 进 行 项 目 合作 、 或 者 只 是 浏览 网 站 找寻 灵感 的 人 ， 将 不 
会 看 到 要 求 填 写 这 些 附 加 资料 的 表单 。 
19.1.1 把 数据 变 成 仪表 盘 
不 管用 户 属于 什么 类 型 ， 设 计 师 、 客 户 、 或 者 爱好 者 ， 系 统 都 会 自动 为 
每 位 用 户 创建 一 个 个 人 资料 页 面 ， 并 且 其 他 所 有 网 站 成 员 都 能 看 到 。 
当 用 户 在 网 站 里 有 所 举动 时 ， 个 人 资料 页 面 就 会 相应 地 更 新 以 便 反 映 他 
的 行为 。 


如 图 19-3 所 示 ， 如 果 John 创建 了 自己 的 案例 集 、 收 藏 了 其 他 人 的 案例 
集 、 标 明了 职能 范围 和 工作 费用 、 发 表 了 博客 文章 等 等 ， 他 的 个 人 资料 
页 面 就 会 相应 更 新 以 便 显 示 这 些 信息 。 
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任何 网 站 成 员 都 可 以 浏览 其 他 成 员 的 个 人 资料 ， 了 解 他 喜欢 哪些 案例 、 
创建 了 什么 案例 或 者 评论 了 什么 案例 ， 还 能 阅读 他 的 博客 文章 。 





Artlst, category project, atc- 








About JSMithTheArtist 


Sign oul | My Account | ContactUs | Help 





Edit my profile 





Real name: JohnSmith 
Design speclalty: Graphic, Industrlal 














Account Avallabllity: Contract 

Wp avatar Rate(s): $60/hour, or by project 

Inbox (5) 

Brojects (2) 
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Create a gallery Gallery title 

Description of gallery goes here, as specified by artists when creating 

¥ene oms the gallery 
Gallery title 

Latest posts Description of gallery goes here, as specified by artists when creating 
the gallery 

Post title 





This is a snippet from the 
most recent blog post from 
this artist. 


Post title 
This is a snippet from the 





Favorite Galleries (by other artists) Edit 


Gallery title 
Description of gallery goes here, as specified by artists when creating 
the gallery 


most recent blog post from 
this artist. Gallery title 
Description of gallery goes here, as specified by artists when creating 


the gallery 





Post title 





This is a snippet from the 
most recent blog post from 
this artist. 














图 19-3 


这 种 个 人 资料 页 面 展示 的 内 容 和 固定 资料 页 面相 比 ， 明 显要 更 加 充实 和 
生动 。 它 变 成 了 一 个 棚 棚 如 生 的 用 户 行为 记录 。 


这 样 做 有 很 多 好 处 。 首 先 ， 只 要 找到 了 中 意 的 案例 ， 就 能 马上 点 击 查看 
该 作者 的 其 他 案例 。 其 次 ， 当 看 到 有 符合 自己 品味 的 评论 或 标价 时 ， 你 
也 能 很 方便 地 查看 该 作者 喜欢 的 其 他 案例 以 及 他 对 它们 的 评价 。 


换 句 话说 ， 你 可 以 把 任何 用 户 的 个 人 资料 页 面 作为 寻找 优秀 内 容 的 入 口 。 
如 果 你 发 现 另 一 位 客户 Sarah 喜欢 的 东西 和 自己 非常 一 致 ， 你 便 可 以 通 
过 Sarah 的 个 人 资料 看 看 她 最 近 查 看 过 的 东西 。 
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19.1.2 ”空白 资料 页 面 


如 果 用 户 注 册 后 没有 任何 行动 ， 那 么 他 的 个 人 资料 就 会 是 一 个 空白 资料 
页 面 。 


空白 资料 页 面 里 面 没 有 任何 数据 信息 ， 只 有 该 用 户 出 现 某 种 行为 才 会 添 
加 。 由 于 目前 这 位 用 户 在 网 站 里 还 没有 做 任何 事 ， 例 如 收藏 某 位 设计 师 
的 案例 ， 所 以 他 的 个 人 资料 里 面 几乎 空空 如 也 。 


空白 资料 页 面 的 好 处 在 于 它们 可 以 鼓励 人 们 采取 行动 。 我 们 这 个 例子 中 ， 
没有 个 人 资料 信息 的 资料 页 面 会 提供 一 些 链接 ， 方 便 用 户 浏 览 各 个 案例 、 
创建 案例 集 等 等 。 这 种 方式 将 更 能 刺激 尚未 采取 行动 的 用 户 开 始 创 建 自 
己 的 案例 集 ， 或 者 发 表 评论 。 


个 人 资料 通常 包含 一 些 用 户 人 简单 的 个 人 细节 信息 ， 但 个 人 资料 也 能 提供 
某 种 机 会 。 在 这 个 例子 里 ， 个 人 资料 变 成 了 一 种 有 效 的 人 际 交 往 手 段 ， 
提供 了 一 条 清晰 的 途径 来 了 解 其 他 成 员 的 喜 恶 。 
通过 提供 这 种 信息 ， 用 户 将 开始 信任 与 之 品味 类 似 的 成 员 ， 并 且 会 时 常 
回访 ， 获 知 他 们 最 近 的 浏览 内 容 。 也 正 因为 这 种 信任 ， 他 们 也 有 理由 一 
次 又 一 次 地 反复 光顾 这 个 网 站 。 
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在 第 3 章 ， 我 谈 到 曾经 重新 设计 了 一 个 在 线 网 站 产品 的 导航 。 本 章 我 想 
谈 谈 同 一 个 产品 的 另 一 个 问题 一 一 编辑 功能 ， 这 可 比 稍稍 修改 一 下 导航 
菜单 要 麻烦 得 多 。 








这 个 产品 就 是 








多 功能 症 的 负面 典型 。 在 科学 术语 中 ， 多 功能 症 是 指 产 品 














由 于 包含 过 多 
科学 )。 


在 我 们 这 个 例子 中 ， 一 大 堆 的 功能 被 蹇 到 产品 中 ， 造 成 了 极为 繁复 的 用 


功能 而 引起 的 一 种 可 用 性 低下 的 疾病 (好 吧 ， 这 并 不 是 很 
































户 体 验 。 而 这 一 点 在 它 的 编辑 功能 (该 产品 最 基本 、 最 常用 的 功能 ) 中 


则 尤为 突出 。 


只 要 用 户 试图 
面 中 插入 图 片 








执行 某 个 编辑 任务 ， 不 管 
， 系 统 总 会 弹出 同一 个 窗 





个 讨厌 的 弹出 窗口 打交道 。 


这 个 弹出 窗口 


包含 了 文本 格式 工具 、 图 片 编辑 工具 、 插 和 人 时间 戳 、 创 建 
RSS 的 Feed …… 只 要 是 你 能 叫 出 名 字 的 ， 都 在 里 面 。 


目 
人 
口 





很 自然 ， 我 非常 疑惑 为 什么 不 能 把 这 些 工 
出 窗口 。 而 同时 我 也 很 疑惑 何苦 让 用 户 每 次 都 得 在 这 么 一 大 堆 工 具 中 费 








为 菜 段 文本 调整 格式 还 是 在 页 
。 而 几乎 所 有 的 交互 都 得 和 这 





















































具 放 在 主 界面 里 ， 从 而 去 掉 弹 











劲 地 找寻 自己 需要 的 那 一 个 。 














RSS (Really Simple Syndication) 是 一 种 用 于 共享 网 上 新 闻 频道 、 博 客 和 其 他 Web 























应 用 。 
器 或 RSS 
Summary 

其 他 站 点 i 

















用 用 。 一 一 译 者 注 














内 容 的 数据 交换 规范 。 这 种 描述 和 同步 网 站 内 容 的 格式 是 目前 使 用 最 广泛 的 XML 
户 订阅 了 某 个 站 点 的 RSS 之后， 不 用 登录 该 网 站 就 能 通过 自己 的 浏览 
阅读 器 随时 了 解 该 网 站 的 更 新 情况 。 也 有 人 说 RSS 的 全 称 为 Rich Site 
(丰富 站 点 摘要 )。 所 谓 Feed 就 是 指 RSS 的 源 ， 其 中 包含 的 信息 能 直接 被 
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比如 说 ， 要 想 为 文本 设置 格式 ， 用 户 必 须 把 鼠标 移动 到 文本 上 ， 在 随 之 
出 现 的 小 菜单 中 选择 Edit〈 编 辑 )， 然 后 等 待 弹出 窗口 出 现 并 载 人 各 种 工 
有 具 。 这 些 完成 之 后 ， 他 必须 先 在 弹出 窗口 中 选择 想 编辑 的 文本 ， 然 后 在 
工具 栏 的 众多 图 标 里 找到 想 要 的 那个 ， 例 如 Bold (设置 粗 体 )。 确 认 了 格 
式 变化 之 后 ， 他 还 得 先 单 击 Save 保存， 按钮 ， 等 待 弹出 窗口 关闭 ， 然 
后 再 等 待 主 界面 里 面 的 文本 更 新 。 


如 有 果 这 位 用 户 想 修改 男 一 段 文本 的 格式 ， 他 必须 重 来 一 次 。 如 有 果 想 撤销 
这 次 改动 ， 他 唯一 的 选择 也 是 重复 同样 一 系列 步 又 。 


正如 你 所 想象 的 ， 在 进行 几 次 修改 后 这 个 过 程 就 会 变 得 相当 单调 乏味 。 
无 论 如 何 这 些 都 称 不 上 令 人 愉快 的 瞬间 。 


而 随后 的 两 轮 可 用 性 测试 也 证 实 了 这 一 猜想 。 我 们 的 测试 者 连 最 基础 的 
任务 都 失败 了 ， 其 中 一 些 测试 者 还 不 是 第 一 次 使 用 这 个 产品 。 


绝 大 部 分 情况 下 ， 这 个 弹出 窗口 里 所 有 的 编辑 工具 都 能 够 使 用 。 导 航 用 
户 在 其 中 很 难 找到 完成 手头 任务 所 需要 的 工具 。 整 个 弹出 窗口 里 面 大 概 
有 一 百 多 个 不 同 的 工具 和 选项 ， 但 其 中 只 有 3~4 个 能 真正 满足 所 有 的 任 
务 。 比 如 说 ， 修 改 文本 格式 时 ， 择 入 日 历 图 标 就 没有 用 ， 其 至 还 会 妨碍 
用 户 。 而 这 个 弹出 窗口 中 的 大 部 分 工具 都 和 最 常用 的 任务 无 关 。 


而 把 所 有 这 些 工具 放 在 一 个 弹出 窗口 中 ， 这 意味 着 迫使 用 户 脱离 了 任务 
环境 本 身 。 他 们 无 法 看 着 页 面 进行 编辑 ， 因 为 弹出 窗口 挡 在 了 中 间 。 


由 于 资源 缺乏 ， 在 我 加 入 之 前 ， 这 一 项 目 没有 交互 设计 师 参 与 过 开发 。 
程序 人 员 在 一 开始 尽 了 自己 最 大 的 努力 〈 尽 管用 户 和 内 部 管理 层 不 停 地 
要 求 添加 功能 )， 时 刻 说 记 以 保证 用 户 的 兴趣 为 出 发 点 做 出 决定 。 然 而 ， 
缺乏 对 可 用 性 的 次 刻 理 解 和 产品 发 展 的 长 远 计 划 ， 最 后 导致 开发 者 不 得 
不 被 迫 往 里 面 添加 一 个 又 一 个 的 新 功能 。 同 时 因为 缺乏 整理 头绪 的 时 间 
和 有 效 的 执行 力 ， 开 发 者 落 入 了 陷阱 。 他 们 唯一 能 做 的 就 是 在 界面 里 找 
寻 空 余 的 地 方 塞 人 新 功能 ， 然 后 祈祷 能 凑合 过 去 。 


关于 这 个 产品 他 们 听 到 的 抱怨 和 我 一 样 ， 也 和 我 一 样 对 此 感到 厌倦 。 幸 
运 的 是 ， 我 们 在 几 个 关键 之 处 达成 了 共识 ， 从 而 能 够 开始 进行 再 设计 。 


我 们 从 编辑 功能 着 手 。 
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清除 这 一 片 混 乱 并 不 容易 。 项 目 开 发 者 以 及 我 团队 里 的 其 他 设计 师 花 费 
了 儿 天 时 间 进 行 讨 论 和 白板 会 议 ， 最 后 提出 了 一 个 技术 上 可 行 、 又 能 
决 大 部 分 显著 的 可 用 性 问题 的 方案 。 


C20.1 在 正确 的 时 间 显 示 正 确 的 工具 


要 想 减 轻 编 辑 功 能 的 混乱 程度 ， 最 好 只 显示 与 当前 任务 相关 的 工具 ， 同 
时 我 们 也 希望 用 户 能 直接 地 编辑 他 们 的 网 页 ， 而 不 是 被 带 到 男 一 个 界面 。 


在 这 个 过 程 中 ， 我 们 希望 能 让 这 个 功能 超载 的 产品 看 上 去 更 简单 一 点 。 
尽管 它 几 乎 无 所 不 能 ， 但 我 们 相信 ， 在 正确 的 时 间 显示 正确 的 工具 ， 能 
让 每 个 任务 更 加 容易 。 


我 们 把 所 有 的 工具 和 选项 从 弹出 窗口 上 挪 出 来 ， 放 到 了 主 界面 中 ， 就 在 
被 编辑 网 页 旁边 。 这 个 举措 解决 了 任务 的 环境 问题 ， 但 最 棘手 的 难题 还 
在 后 头 。 

怎样 才能 隐藏 那些 和 当前 任务 无 关 的 工具 和 选项 呢 ? 

我 们 曾 考 虑 简单 地 把 工具 置 灰 ， 让 它们 无 法 使 用 。 但 是 这 意味 着 用 户 将 
不 能 在 中 途 改 变 主意 。 比 方 说 ， 如 果 在 用 户 选 中 好 文本 时 把 图 片 编辑 工 
有 具 置 灰 ， 那 么 本 来 想 编辑 文本 的 用 户 就 无 法 在 中 途 转 而 去 插入 一 张 图 片 
J 

因此 ， 在 隐藏 无 关 工 具 的 同时 ， 我 们 还 必须 确保 所 有 的 工具 在 任何 时 间 
都 能 被 用 户 找到 。 

我 们 考虑 了 一 种 设计 ， 类 似 于 在 很 多 Adobe 产品 中 用 到 的 Properties 〈 属 
性 ) 面板 。 例 如 Adobe Flash。 见 图 20-1。 


这 种 面板 上 的 选项 会 根据 用 户 当 前 使 用 的 工具 而 改变 [图 20-1 中 显示 的 
是 Flash 里 Text Tool (文本 工具 ) 选项 ]。 

它 可 以 办 到 只 显示 与 任务 相关 的 控件 ， 但 我 们 不 能 让 屏幕 上 满 是 这 些 控 
件 面 板 。 所 以 这 种 设计 不 能 保证 用 户 能 随时 使 用 所 有 其 他 的 工具 。 
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图 20-1 


幸运 的 是 ， 我 们 知道 可 折 爱 面板 控件 〈 在 14 章 讨论 过 )。 在 进行 这 个 项 
目的 同时 我 们 还 有 其 他 几 个 项 目 ， 其 中 某 几 个 就 用 到 过 这 种 可 折 和 县 面板 ， 
所 以 我 们 想 把 它 也 作为 一 个 选择 考虑 进来 (为 了 保持 图 片 更 容易 辨识 ， 
我 只 在 这 里 展示 了 可 折 对 面板 和 编辑 区 域 。 要 想 展示 整个 界面 铠 怕 得 需 
要 更 大 的 一 本 书 )。 见 图 20-2。 
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Site-wide options 
Product ideation Featured client 
Design (@)) | dotherightthing.com 
Web development 
Images Do The Right Thing (DTRT) encourages companies to do the right thing by 
Forms and Tables Usability reviews enabling the site's members to post stories about company practices and rate the 
social impact of their decisions 
Layout Training 
Extras Learn more about our cllents » 




















图 20-2 


从 这 个 粗略 的 草图 中 可 以 看 到 ， 我 们 能 在 可 折 县 面板 中 将 最 常见 的 工具 
和 选项 表面 化 。 而 根据 用 户 不 同 的 行为 ， 相 对 应 的 面板 便 会 自动 打开 。 


例如 ， 用 户 点 击 某 个 文本 段 时 ，Text 〈 文 本) 面板 将 会 自动 打开 。 见 图 
20-3 。 
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20-3 
这 个 面板 将 会 提供 格式 选项 ， 例 如 Bold( 粗 体 )、Ttalic 斜体)、Under- 
line (下划线 〉 等 ， 它 同时 还 包括 一 个 菜单 ， 可 以 用 于 选择 字体 、 字 号 以 
及 字体 颜色 。 
这 些 就 是 在 正确 时 间 里 显示 的 正确 工具 。 用 户 点 击 某 个 文本 段 时 ， 不 管 
他 们 是 想 写 、 修 改 还 是 想 设置 文 字 格 式 ， 这 些 都 是 能 够 方便 取 用 的 工具 。 
用 户 点 击 图 片 时 将 会 打开 Images (图像) 面板， 展现 编辑 图 片 所 需 的 选 
项 。 点 击 网 页 中 的 空白 区 域 则 会 打开 Site( 站 点 ) 面板 ， 出 现 的 选项 可 以 
应 用 于 整个 站 点 ， 例 如 Create Page (创建 新 页 面 ) 和 Organize Navigation 
(组 织 导航 栏 )。 
我 们 花 了 数 天 时 间 弄 清楚 在 每 个 面板 中 应 该 放 些 什么 工具 ， 以 及 如 何 为 
用 户 提供 不 在 面板 中 的 工具 。 


解决 办 法 也 很 简单 : 应 用 递 进 显示 (Progressive disclosure) 原则 。 


20.1.1 把 高 级 的 玩意 藏 起 来 

正如 在 第 11 章 和 第 16 章 中 讨论 的 ， 递 进 显 示 是 一 种 根据 功能 是 否 普及 
或 必要 逐步 展现 它们 的 方法 。 

这 个 例子 中 ， 只 显示 与 任务 相关 的 工具 一 点 错 也 没有 。 但 我 们 也 仍然 需 
要 一 种 方式 用 来 提供 其 他 工具 或 选项 ， 以 备 不 时 之 需 。 
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所 以 我 们 设计 了 一 种 文档 模式 "对 话 框 ， 用 它 来 容纳 附加 的 选项 。 文 档 模 
式 是 说 ， 对 话 框 将 短暂 地 阻止 用 户 和 被 编辑 网 页 之 间 的 交互 ， 即 无 法 使 
用 Edit〈 编 辑 ) 面板 ， 但 用 户 仍 然 能 够 与 应 用 程序 的 其 他 部 分 以 及 浏览 
器 本 身 交 互 。 


比如 说 ， 用 户 点 击 某 个 文本 段 后 ， 打 开 的 Text 面板 里 包含 了 一 个 将 选中 
文本 变 成 超 链 接 的 选项 。 但 我 们 不 能 把 与 超 链 接 有 关 的 所 有 选项 都 放 在 
可 折 双 面板 里 面 ， 而 是 把 它们 挪 到 了 一 个 对 话 框 里 。 

所 以 ，Edit 面板 变 暗 而 且 不 可 用 ， 同 时 这 个 对 话 框 在 同一 个 屏幕 区 域 打 


开 。 在 对 话 框 里 ， 选 择 超 链接 的 相关 选项 ， 然 后 单 击 Finished 〈 结 束 ) 按 
钮 创建 这 个 链接 。 见 图 20-4。 
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Create 是 图 Another page on this site 
About Us 

国 Open in new window 
@ Email 
@ Uploaded file 
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20-4 


交互 的 触发 器 Create a link〔 创 建 链接 ) 选项 出 现在 可 折 和 县 面板 中 ， 而 该 





功能 的 选项 则 出 现在 对 话 框 里 。 

















包 与 应 用 程序 模式 对 话 框 不 同 ， 文 档 模式 对 话 框 将 阻止 用 户 和 当前 文档 窗口 发 生 其 
他 任何 交互 ， 但 用 户 可 以 切换 到 该 应 用 程序 中 的 其 他 文档 窗口 ， 或 者 切换 到 其 
他 应 用 程序 。 读 者 可 以 通过 以 下 链接 查阅 Apple 的 人 机 界面 指南 (Apple Human 
Interface Guidelines) 中 关于 document-modal 的 详细 说 明 http://developer.apple. 
com/ documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGWindows/ 

译 者 注 
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20.1.2 ”打扫 干 净 


在 写 这 一 章 时 ， 还 有 不 少 人 在 使 用 这 款 产 品 。 从 功能 上 来 讲 ， 它 还 是 非 
常 缓慢 、 策 重 。 毕 竟 创 建 网 站 可 不 是 件 轻松 的 事 ， 但 我 们 对 于 编辑 功能 
的 检查 在 相当 程度 上 仍然 改进 了 产品 的 可 用 性 。 


在 某 个 应 用 产品 中 ， 如 果 你 发 现 要 完成 某 些 任务 时 会 牵扯 到 非常 多 的 工 
有 具 和 选项 ， 那 么 最 好 是 尽快 以 全 新 的 眼光 重新 检视 ， 然 后 设法 加 以 改进 。 
在 我 们 这 个 例子 里 ， 递 进 显 示 就 是 关键 : 只 显示 每 项 任务 需要 的 工具 和 
选项 的 关键 。 

关键 就 是 在 正确 的 时 间 显 示 正 确 的 工具 。 通 过 这 种 方式 ， 完 成 任务 所 需 
要 的 步骤 和 用 户 需 要 做 出 的 决定 都 大 大 减少 了 ， 这 证 每 一 次 交互 都 更 容 
易 执行 了 ， 而 且 每 一 个 交互 的 皮 间 都 令 人 更 加 愉快 。 
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一 
至 


,“ 朋 友 ” 一 个 多 么 美好 的 词汇 。 我 们 和 朋友 一 起 笑 ， 一 起 器， 一 起 








偷偷 开小差 。 远 离 电 脑 的 时 候 ， 正 是 这 些 人 陪伴 着 我 们 共度 日 益 宝贵 的 
分 分 秒 秒 。 


但 是 通过 网 络 ， 例 如 Facebook、MySpace、LinkedIn、Twitter 和 其 他 许多 
全 民 媒 体 网 站 ， 我 们 所 建立 的 朋友 关系 与 日 常生 活 中 建立 的 朋友 关系 又 
稍 有 不 同 。 


网 络 的 朋友 关系 通常 带 些 做 作 和 人 为 。 当 然 ， 我 们 也 可 以 像 在 同一 个 网 
站 里 那样 和 真正 的 朋友 去 交往 ， 但 更 常见 的 是 ， 我 们 和 那些 不 认识 的 人 
结交 。 他 们 可 能 是 我 们 在 论坛 里 、 讨 论 组 中 认识 的 ， 也 可 能 是 朋友 的 朋 
友 ， 或 者 是 我 们 素 未 谋面 、 但 一 直 尊 敬 和 倾 交 的 人 等 等 。 


而 有 些 翡 隧 的 是 ， 这 种 朋友 关系 通常 没有 什么 意义 或 深度 。 拿 Facebook 
举 个 例子 。 当 你 在 Facebook 上 和 某 些 人 结交 为 朋友 时 ， 他 们 的 行为 都 会 
列举 在 你 的 Facebook 页 面 上 。 但 是 他 们 的 行为 往往 又 都 是 和 其 他 人 交 朋 
友 、 赠 送 虚 拟 礼物 、 发 消息 等 等 。 当 然 这 很 有 意思 ， 但 是 最 后 你 得 到 的 
并 不 是 真正 的 信息 ， 而 只 是 一 堆 噪音 。 这 可 能 乐趣 无 穷 ， 但 同时 也 毫 无 
目的 ， 至 少 事实 上 如 此 。 


就 这 一 点 而 论 ， 交 友和 其 他 行为 一 样 ， 环 境 不 同 ， 情 况 也 不 同 。 

对 于 Facebook、MySpace 等 网 站 来 说 ， 交 友 是 他 们 业务 开展 的 基石 ， 但 
是 许多 环境 下 的 交友 其 实 毫 无 意义 

当 DoTheRightThing 那 帮 家 伙 决 定 尝试 在 站 点 里 加 入 交友 系统 时 ， 我 猜 
想 这 不 过 是 又 多 了 一 个 不 太 成 功 的 例子 而 已 。 
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DTRT 创立 的 目的 是 想 提 高 人 们 对 一 部 分 企业 道德 或 不 道德 举措 的 意识 。 
这 并 不 是 一 个 很 具 娱乐 性 的 活动 。 当 然 ， 这 种 社会 意识 的 行为 可 以 令 人 
感觉 好 玩 或 者 满足 ， 但 肯定 不 至 于 像 一 场 周末 狂 舞 夜 那样 。 


他 们 的 基本 想法 和 其 他 许多 社交 网 站 一 样 ， 就 是 用 户 能 够 通过 其 他 成 员 
的 个 人 资料 页 面 交友 。 访 问 该 页 面 的 用 户 单 击 Become My Friend (成 
为 我 的 朋友 ) 按钮 ， 然 后 两 人 之 间 立 刻 就 会 产生 一 段 持久 的 、 意 味 深长 
的 友情 。 他 们 可 能 会 在 周末 一 块 参加 街区 扑克 比赛 ， 他 们 的 儿子 可 能 会 
成 为 最 好 的 朋友 ， 并 且 上 同一 所 学 校 ， 最 后 在 集体 婚礼 上 迎娶 一 对 姐 
妹 . 


唔 ， 所 以 我 不 是 很 理解 DTRT 里 面 交友 系统 的 目的 。 
我 的 第 一 个 问题 是 ， 当 你 成 为 某 个 人 的 朋友 时 会 发 生 什么 ”? 


结果 是 这 个 想法 太 新 了 ， 新 得 还 没有 人 能 真正 充实 它 。 他 们 知道 自己 想 
误 励 人 们 在 网 站 里 浏览 更 多 的 故事 ， 然 而 事实 上 成 员 通 常 只 会 看 一 个 故 
事 ， 评 分 然后 离开 。 同 时 他 们 还 认为 提供 一 种 方式 供 人 们 沟通 是 种 很 好 
的 刺激 。 


我 觉得 他 们 在 这 里 已 经 有 了 初步 的 概念 ， 但 仍 需 要 一 些 调整 。 
C21.1 朋友 与 随员 


Facebook 提供 了 无 数 种 方式 让 人 们 随时 掌握 朋友 的 动向 ，MySpace 也 是 
如 此 。 然 而 虽然 大 部 分 这 些 功能 和 动向 都 很 不 错 ， 但 在 DTRT 这 种 关注 
社会 变迁 而 不 是 娱乐 的 网 站 上 却 一 点 用 没有 。 


在 DTRT 上 添加 交友 功能 后 正如 图 21-1 所 示 这 个 样子 。 


而 我 们 也 正 是 从 这 里 开始 。 页 面 中 有 一 个 单 击 与 该 用 户 结交 朋友 的 按钮 、 
该 用 户 部 分 朋友 的 头像 ， 以 及 可 以 查看 他 所 有 朋友 的 链接 。 

但 是 这 个 页 面 与 DTRT 的 感觉 并 不 是 非常 贴切 。 因 此 我 和 Rod Ebrahimi 
(DTRT 的 创始 人 )“ 花 了 好 几 天 通过 邮件 相互 发 送 线 框图 ， 并 晶 一 直 讨 
论 在 线 交 友 的 本 质 ， 以 及 这 个 想法 如 何 才 能 适 配 DTRT。 
















































































中 Rod 在 DTRT 网 站 的 个 人 资料 页 面 为 http://dotherightthing.com/users/rod。 一 一 译 者 注 
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Robert's Profile 


~ Robert Hoekman, Jr. 
EE 34 year old male from Arizona 


‘Website: httpsimiskeeto.com 





About Me 

Doing the right thing for 8 months 

Consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna 


aliquam erat volutpat. Ut wisi enim ad minim veniam, 


quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequal_ 
Duis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel ilum 
dolore eu feugiat nulla facilisis at vero eros. 


Become my friend! 


My Friends 


导 之 株 夯 
之 帮 贺 认 


21.1 朋友 与 随员 153 


How I'm Doing the Right Thing 
Today 


Ryan found my story "Universal to test selling DRM-free 
music" about Universal Music Group important 





Rod found my story "Universal to test selling DRM-free 
music" about Universal Music Group important 


My friend Robert found my story “Universal to test selling 
DRM-free music” about Universal Music Group important 


1posted the story "Universal to test selling DRM-free 
music” 


about Universal Music Group 





2 days ago 

Bober is now friends with Mike_Hil. 
Bober is now a friend! 

John is now a friend! 


My friend Ryan posted the story “New program fights global 
warming" about Virgin Group 


My friend Byan added the company BioCyte International 


Byan is now a friend! 


Bod is now a friend! 





图 21-1 
我 们 几乎 得 不 出 答案 。 


某 人 单 击 了 Become My Friend 按钮 后 会 发 生 什 么 ? 什么 样 的 行为 才 会 增 
进 这 种 朋友 关系 ?这些 东 西 是 否 真 的 能 鼓励 网 站 成 员 去 阅读 或 发 表 更 多 
的 故事 ? 

不 管 我 们 怎样 看 ， 交 友 功 能 对 DTRT 来 说 还 是 没什么 意 

我 们 真正 想 要 的 并 不 是 建立 友谊 ， 而 是 一 种 简单 而 又 不 张扬 的 功能 。 它 
能 激发 人 们 阅读 更 多 的 文 草 、 与 网 站 发 生 更 多 的 联系 。 

最 后 ， 我 们 跟从 了 Twitter 网 站 的 领导 。 


Twitter 提供 了 一 种 较为 弱势 、 被 称 为 Follow ( 跟从 ) 的 交友 方案 。 简 单 
来 说 ， 任 何 网 站 成 员 都 可 以 到 另 一 个 成 员 的 个 人 资料 页 面 上 单 击 Follow 
订阅 他 在 Twitter 的 Feed。 
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不 用 付出 太 多 精力 ， 而 同样 能 随时 掌握 男 一 位 成 员 的 动向 。 这 样 就 够 了 。 


我 们 认为 “跟从 ” 某 人 动向 这 种 简单 的 行为 更 适合 DTRT。 通 过 查看 自 
己 跟 从 的 人 发 表 的 文章 ， 或 者 寻找 那些 有 很 多 人 跟从 的 人 ， 你 可 以 很 快 
找到 感 兴趣 的 故事 、 发 现 谁 给 哪个 故事 评 了 高 分 等 等 。 


有 意思 的 是 ， 要 想 扭转 形势 只 需 在 左边 的 工具 栏 里 面 改 几 个 字 就 行 〈 因 
为 真正 的 交友 系统 尚未 构建 ， 因 为 没 人 知道 该 构建 些 什么 。 通 过 线 框 赂 ， 
我 们 可 以 在 写 代 码 之 前 做 出 任何 决定 ， 也 可 以 随时 修改 )。 


如 图 21-2 所 示 ， 我 们 把 按钮 上 的 文字 Become My Friend 改 为 Follow My 
Activities 〈 跟 从 我 的 动向 )， 然 后 修改 周围 的 文本 以 配合 这 一 改变 。 在 其 
他 成 员 头 像 那 里 ， 我 们 用 Who’”s Following Me? 〈 谁 在 跟从 我 ? ) 代替 了 
My Friends 〈 我 的 朋友 们 )， 用 See all 46 followers (查看 所 有 46 位 跟从 
者 ) 代替 了 See all 46 friends (查看 所 有 46 位 朋友 )。 




















Roberts Profile 


~ Robert Hoekman, Jr. 
34 year old male from Arizona 
Website: http/miskeeto.com 


About Me 

Doing the right thing for 8 months 

Consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna 
aliguam erat volutpat. Ut wisi enim ad minim veniam, 
guis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel ilum 
dolore eu feugiat nulla facilisis at vero eros. 


Follow my activities1 


Who's following me? 


| 
2 总 加 讼 


See all 46 followers 
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21.1 朋友 与 随员 155 


这 些 简单 的 改变 让 事情 变 得 顺眼 多 了 。 现 在 ，DTRT 成 员 在 个 人 资料 页 
面 简单 扫 一 眼 就 能 看 到 其 他 各 种 人 在 网 站 上 的 行为 。 理 论 上 来 说 ， 这 能 
够 激发 他 们 去 阅读 或 发 表 更 多 的 故事 。 
不 在 场 时 的 照片 

在 写 这 一 章 时 ， 这 个 系统 还 没有 被 构建 好 而 尚未 添加 到 网 站 中 ， 所 以 我 
不 能 断定 在 那 一 刻 我 们 是 否 做 出 了 决定 。 但 我 们 已 经 仔细 研究 了 问题 ， 
并 且 根 据 领悟 力 做 出 了 决定 ， 因 此 我 们 相信 网 站 肯定 会 变 得 更 好 ， 而 且 
我 们 将 能 为 DTRT 的 用 户 提 供 一 些 真 正 适 合 他 们 的 东西 。 

我 知道 全 民 媒 体 网 站 在 当今 如 火 如 茶 ， 然 而 随 之 而 来 的 那些 功能 ， 如 交 
友 、 评 分 、 投 票 、 评 论 等 等 都 需要 仔细 周全 地 考虑 ， 而 不 要 随便 就 把 它 
们 像 大 杂烩 一 样 扔 进 社 区 网 站 。 这 对 于 Ajax、DHTML、Adobe Flash 以 
及 其 他 热 漳 都 是 一 样 。 


不 要 随便 就 被 热潮 牵 着 走 。 请 三 思 而 后 行 。 
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第 22 章 
显而易见 的 博客 


即将 展现 给 你 们 的 这 个 博客 模板 ， 并 不 是 为 某 个 
上 ， 我 没有 使 用 设计 软件 ， 没 有 月 














在 开始 设计 时 ， 我 连 具 
故事 是 这 样 的 。 
























































体 的 想法 都 没有 。 























2007 年 7 月 ， 我 在 WordCamp 做 了 一 次 演讲 。 那 次 是 由 Wor 
发 商 Automattic 主办 的 一 次 年 会 ， 很 多 WordPress 的 博 主 聚 





两 天 的 时 间 里 以 博客 为 











主题 进行 探讨 。 








具体 客户 创建 的 。 实 际 
日 白板 或 黑板 ， 也 没 用 到 笔 和 纸 。 其 至 





dPress 的 开 
一 和 党， 在 





抵达 时 ， 我 已 经 准备 好 了 演讲 的 内 容 ， 主 要 基于 我 写 的 Designing the 
Obvious 那 本 书 。 之 前 我 参加 过 好 几 次 类 似 的 演讲 ， 对 自己 要 说 的 内 容 





相当 自信 ， 而 且 已 经 修改 了 幻灯 片 的 内 容 ， 把 
所 以 我 认为 这 个 一 定 能 满 





识 到 这 些 听众 可 能 不 会 


小 时 来 避免 这 个 迫近 的 


























E 点 更 多 地 放 在 了 博客 上 。 
足 听 众 。 但 是 在 会 场 看 了 几 个 演讲 之 后 ， 我 意 


太 关 心 我 准备 的 那些 Web 应 用 设计 的 指导 原则 。 
我 即将 在 三 百 多 人 面前 站 起 来 ， 然 后 被 炸 成 碎片 。 而 现在 还 有 大 约 1 个 

















危机 。 


我 溜 出 大 厅 跑 到 了 休息 室 ， 打 开 了 笔记 本 ， 人 快速 地 细 读 了 一 遍 自 己 的 弥 


灯 乒 。 
我 做 了 一 点 改动 ， 然 后 








WordCamp 是 一 种 非 


绝望 地 试图 劝 服 自己 一 定 能 侥幸 成 功 。 

















章 )。 这 种 会 议 由 该 和 


次 件 的 用 户 (或 者 说 博 主 ) 自主 发 起 ， 可 以 和 开 


























对 该 软件 的 各 个 方面 
的 网 址 为 http://centra 





进行 探讨 ， 并 且 把 会 议 概况 发 布 到 WordCamp 
1].wordcamp.org/。 一 一 译 者 注 
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正式 的 会 议 ， 主 题 聚 焦 于 博客 在 线 软件 WordPress〈 见 本 书 第 1 


发 人 员 共 同 针 
P。 WordCamp 





22.1 通 往 更 好 的 博客 的 三 条 路 157 
我 在 骗 谁 呢 ? 


我 关闭 了 幻灯 片 ， 打 开 了 文本 编辑 程序 ， 开 始 记 下 一 些 笔 记 ， 内 容 是 如 
何 才能 做 好 一 个 博客 设计 。 


大 约 30 分 钟 后 ， 我 走 上 讲台 ， 告 诉 不 停 了 矣 品 的 听众 我 扔 掉 了 自己 的 讲 
稿 ， 也 不 会 给 他 们 展示 什么 幻灯 片 。 听 众 鼓 起 掌 来 ， 很 明显 没 人 喜欢 纪 
灯 片 。 


在 后 面 的 1 个 小 时 ， 我 引领 了 一 场 关于 什么 才 是 优秀 博客 设计 的 讨论 ， 
而 不 是 演讲 。 我 论述 了 一 些 自己 书 里 面 的 原则 ， 然 后 提出 了 一 些 开放 式 
问题 ， 范 围 集中 在 如 何 把 这 些 原 则 应 用 到 博客 设计 里 面 去 ， 以 及 怎样 在 
这 些 想法 的 基础 上 再 更 进一步 。 


幸运 的 是 ， 听 众 跟 上 了 我 的 步调 。 他 们 声音 很 大 ， 而 且 投 入 、 积 极 、 情 

绪 高 涨 。 他 们 喊 出 了 不 少 好 主意 。 他 们 在 整个 大 厅 里 争论 。 他 们 简直 令 

人 惊异 ! 

讨论 时 ， 我 用 脑子 记 下 了 大 家 共同 认可 的 每 一 条 。 演 讲 的 最 后 ， 我 把 所 

有 这 些 意见 总 结 出 来 ， 最 后 一 次 引用 了 我 的 书 ， 终 于 安然 无 盖 地 走 下 了 

讲台 。 

几 个 小 时 后 ， 我 打开 了 OmniGraffle 创建 了 一 个 基于 刚才 讨论 的 线 框图 。 
C22.1 通 往 更 好 的 博客 的 三 条 路 

那 次 讨论 中 主要 得 出 了 3 个 主要 结论 。 

首先 ， 我 们 认为 (或 者 说 意识 到 ) 博客 应 该 便于 浏览 者 扫描 页 面 ， 以 决 

定 某 篇 日 志 是 否 值得 阅读 。 

报纸 上 的 文章 在 最 开始 的 几 句 话 中 都 会 展露 出 高 浓度 的 信息 ， 以 此 告诉 

阅读 者 这 是 一 个 关于 什么 的 故事 。 人 然而 博客 并 不 都 有 新 闻 记 载 那 种 特色 ， 

因此 它们 很 少 提供 能 概括 全 文大 意 的 开篇 陈述 。 但 当 访 问 某 个 博客 时 ， 

这 正 是 我 们 最 先 想 看 到 的 。 

其 次 ， 我 们 认为 博客 应 当 能 更 好 地 鼓励 交流 。 绝 大 多 数 博 客 都 为 用 户 提 

供 了 添加 评论 的 功能 ， 但 我 们 相信 除了 简单 的 日 志 评 论 之 外 ， 还 能 够 激 

发 更 多 地 交流 。 
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最 显而易见 的 办 法 就 是 提供 Trackback (引用 通告 ) "。 正 如 你 可 能 已 经 
知道 的 ，Trackback 就 是 在 日 志 页 面 中 出 现 的 某 些 摘录 ， 来 自 于 与 该 日 志 
相关 的 其 他 网 站 。 但 问题 是 只 有 很 少 一 部 分 博客 解释 了 什么 是 Trackback 
或 者 它 是 如 何 工作 的 。 而 如 果 只 有 那些 知道 它 的 博 主 才 会 使 用 这 种 技术 ， 
那么 多 网 站 间 无 限 互联 的 可 能 性 就 变 得 微乎其微 了 。 


最 后 ， 我 们 认为 好 的 博客 设计 应 该 能 够 诱 使 人 们 阅读 更 多 其 他 的 日 志 。 
因为 访问 某 个 网 站 阅读 某 篇 博客 日 志 时 ， 我 们 通常 在 该 网 站 上 停留 的 时 
间 仪 限于 阅读 那 一 篇 日 志 。 我 们 不 会 继续 逗留 去 更 多 地 了 解 提 供 这 篇 日 
志 的 网 站 、 作 者 或 组 织 。 

来 自 听 众 的 建议 包括 提供 链接 指向 相关 日 志 、 最 受 欢迎 日 志 ， 以 及 其 他 等 等 
日 志 分 类 。 同 时 也 应 该 有 链接 指向 前 一 篇 和 后 一 篇 日 志 〔 如 果 适 当 的 话 )。 

另 一 个 解决 方案 是 提供 RSS 的 Feed。 而 由 于 大 多 数 人 都 不 知道 RSS 是 什 
么 ， 或 者 能 为 自己 做 什么 ， 所 以 指向 Feed 的 链接 应 该 添加 说 明 并 且 使 用 
易于 理解 的 文字 。 

而 正如 我 在 Designing the Obvious 中 所 论述 的 ，RSS 的 订阅 页 面 中 应 当 包 
括 RSS 的 简短 说 明 、 提 供 几 个 RSS 阅读 器 程序 的 链接 ， 并 且 应 该 有 像样 
的 格式 ， 而 不 是 一 整 页 密密麻麻 的 XML。 

当然 ， 我 们 也 认为 博客 中 应 当 包 括 所 有 那些 常规 的 内 容 ， 例 如 作者 名 
(如 果 该 博客 有 多 位 投稿 人 )、 日 志 发 表 日 期 、 指 向 网 站 其 他 部 分 的 链接 、 
搜索 栏 ， 以 及 其 他 通用 元 素 。 


22.1.1 解决 方案 
我 们 讨论 的 最 终结 果 正 如 图 22-1 所 示 。 
















































































Q@ Trackback 是 一 种 网 络 日 志 应 用 工具 ， 它 可 以 让 博 主 知道 自己 日 志 的 读者 中 有 哪 
些 人 撰写 了 与 之 相关 的 文章 ， 实 现 了 网 站 之 间 的 互相 通告 。 其 规范 由 Six Apart 在 
2000 年 制订 ， 并 在 Movable Type2.2 中 予以 实现 。 这 种 功能 的 意义 在 于 ， 博 主 可 

以 脱离 只 能 在 对 方 博客 中 发 布 评论 的 方式 ， 而 在 自己 的 博客 中 发 表 对 该 日 志 的 评 

论 。 而 通过 Trackback 的 引用 通告 形式 ， 被 评论 者 的 该 日 志 下 方 将 出 现 该 评论 的 链 

党， 从 而 在 双方 彼此 的 日 志 中 都 能 得 到 体现 。 这 种 评论 方式 使 得 评论 的 发 表 者 既 

能 通知 被 评论 者 ， 又 能 随时 维护 自己 的 评论 并 且 随 时 得 知 其 他 浏览 者 如 何 看 待 自 

己 的 评论 ， 同 时 还 能 通过 通告 吸引 更 多 的 浏览 者 到 自己 的 网 站 来 。 如 果 博 客 有 了 

Trackback 功能 ， 那 么 任何 人 都 可 以 通过 Trackback 来 发 表意 见 和 评论 ， 所 有 的 评论 

都 能 追根 溯源 ， 从 而 在 因特网 上 相互 联接 而 织 成 一 张大 网 。 译 者 注 
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22.1 通 往 更 好 的 博客 的 三 条 路 159 


The Obvious Blog 


Short blog description goes here to provide context to 
users who land on this page and have no idea what 








theyye looking at. 
A provocative post title goes here 
Cseae) Short summary of this post, so users can 
quickly determine if it's worth reading. Next post 
In this site Lorem ipsum dolor sit amet，consectetuer adipiscing elt. Some post we 
Men nav Ins Se pone center ciplechg Pi hy ere Crae. | Eraviou poat 
Main nav In sem ua, gravida eget, faciisis a. vulputate eget, arcu. 
Main nay ns Quisque mi diam. cursus a, dapibus non, omare nec, mi 
2 Fusce et nunc vitae mi poria imperdiet Etiam non auam. 


Pellentesque tortor. Duls vestibulum velit et lectus. Eiiam 
aliquet semper sapion. Class aptent taciti sociosqu ad fhora & 有 Categories 
torquent per conubia nostra, per inceptos hymenaeas. 


Related Current category 
paws Vivamus faucibus. Proin ante libero, auctor a, accumsan sit 。 CalegoryJinxk 
Related post Iink amet, sollicitudin eget. massa. Praesent diam. Suspendisse 。 Category ink 
interdum eleifend odio. Nulla nec arcu. Sed tincidunt pretum Categary ling 
Re rot mee nd ocule eonie. wutato hn, Siauerm cataoory ink 
vel, fells. Sed sit amet nisl. Duis commodo nonummy est In 
Related post ing posuere elit at turpis. Praesent euismod aliquam nulla， Category lnx 
Praesent dicium. orci sit amet sagitiis euismod, lacus Category ing 
mauris pulvinar ligula, vel lacinia diam nulla vitae turpis. ”Categorylinx 
Nulla est nulla, sollicitudin ut, vulputate a, nonummy si 
Popular posts amet, risus. Sed dolor nisl pretium sit amet, placerat eget, 
utrum vitae, justo. Pellentesque turpis lectus, varius at, 
Popular post link sodales ac, rutrum vel, metus. Phasellus sed metus. Nulia 
Popylar posi link rutrum quam in velit. Mauris et enim in ipsum congue 
Ponpularpostink uktrices. Suspendisse eget turpis- 
Ponularposilink 
Pos'ed by Robert on Ocrober 3, 2007 
What others sites are saying 
Link to the addross from your own sito, and this 
| your page 
From somedomain com 


“Lorem ipsum dolor sit amet. consectetuer adipiscing elit 
Maccenas vulputate sodalos dolor.” 


“Lorem ipsum dolor sit amet. consectptuer adipiscing elit. 
Maecenas vulputate sodales dolor” 


3 comments (Subseribe to comments) 
Someone said: 

Lorem ipsum dolor sit amet. consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor. Lorem ipsum dolor sit 
amet consectetuer adipiscing olit. Phasellus in arcu. Cras 
sem urna, gravida eget, facilisis a, vulputate eget, arcu. 
Quisque mi diam. cursus a, dapibus non. ornare nec, mi 


Fusce et nunc vitae mi poria imperdiet. Etiam non quam. 
Pellentosaue tortor Duis vestibulum velit et lectus. 


Someone said: 


Lorem Ipsum dalor sit amet. consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor. 


Someone said: 

Lorem ipsum dolor sit amet. consectetuer adipiscing elit 

Maecenas vulputate sodales dolor Lorem ipsum dolor sit 

oi stp ml mh rope Cras 
urna, gravida eget, facilisis a, vulputate eget, arcu, 

Suenigen Cursus a. dapibus! 


Add a comment 














图 22-1 
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见 图 22-2， 在 页 面 项 部 有 清晰 的 网 站 标题 ， 紧 随 其 后 的 是 一 段 概要 。 这 
样 可 以 让 用 户 很 快 地 洞察 这 个 站 点 是 关于 什么 方面 的 ， 并 且 能 预料 到 从 
中 将 会 得 到 什么 。 

















The Obvious Blog 


Short blog description goes here to provide context to 
Users who land on this page and have no idea what 


theyye looking at 
| Aprovocative posttitle goes here 
Cearch ) Short summary of this post, so users can 
quickly determine if it's worth reading. Next post 
In this site Some pos: :lo 


Lorem ipsum dolor sit amet，consectetuer adipiscing elit. 
Mmnanann smdmedntn mandinkinn dinine aonm lone diniae mlb 





图 22-2 


它 的 下 方 是 日 志 的 标题 。 标 题 使 用 了 很 大 的 Serif ( 衬 线 ) 字体 以 区 别 于 
日 志 正 文 所 使 用 的 Sans Serif (无 衬 线 ) 小 字体 "。( 这 是 报纸 和 网 站 中 常 
用 的 伎俩 ， 用 于 在 视觉 上 将 标题 和 正文 区 分 开 来 。) 


因为 日 志 的 标题 通常 不 会 展现 出 内 文 的 主题 (事实 上 越 是 怪异 离奇 的 标 
题 才 越 有 意思 )， 我 们 在 标题 的 下 方 放 上 了 一 段 简 短 的 内 容 概要 。 现 在 用 
户 可 以 通过 一 段 简单 的 摘录 决定 这 篇 日 志 是 否 值得 读 下 去 。 

然后 ， 训 无 疑问 就 是 日 志 本 身 ， 而 其 后 显示 了 作者 的 名 字 和 发 布 日 期 。 

下 一 个 部 分 的 标题 是 “What Other Sites Are Saying”， 见 图 22-3。 这 个 部 
分 显示 了 Trackback 的 摘录 ， 除 了 通过 某 种 方式 向 用 户 解释 了 这 些 摘录 是 
从 哪里 来 以 外 ， 同 时 还 说 明了 如 何 创 建 Trackback， 以 及 它 的 工作 原理 。 
它 只 是 这 么 一 句 话 : 

在 你 自己 的 站 点 链接 以 下 地 址 ， 这 个 页 面 就 会 列 出 你 的 文 草 : http://www. 
mydomain.com/post/trackback ”。 





































































































中 在 西方 国家 罗马 字母 的 字体 分 为 两 大 种 类 : Sans Serif 和 Serif。Serif 字体 在 字 的 笔 
画 开 始 及 结束 的 地 方 有 额外 的 装饰 ， 而 且 笔 画 的 粗细 会 因 横 直 的 不 同 而 有 区 别 。 相 
反 的 ，Sans Serif 字体 则 没有 这 些 额 外 的 装饰 ， 笔 画 粗细 大 致 差不多 。 常 见 的 Times 
New Roman 等 就 属于 Serif 字体 ， 而 Arial、Tahoma 等 则 属于 Sans Serif 字体 。 中 文 
字体 也 同样 如 此 ， 宋 体 、 细 明 体 〈 繁 体 中 常用 ) 等 属于 Serif， 而 黑体 、 幼 圆 等 则 属 
于 Sans Serif。 一 一 译 者 注 
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What others sites are saying 


Link to the following address from your own sile, and this page 
whl lst your avticie: lip mydomain. com/nostirackback 


From somedomain.com: 


"Lorem ipsum dolor sit amet. consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor.” 


"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
Maecenas vulputate sodales dolor.” 





图 22-3 


有 了 这 段 说 明 ， 用 户 就 能 很 容易 地 知道 在 自己 网 站 写 的 日 志 是 如 何在 当 
前 页 面 显示 摘录 的 。 让 事情 变 得 简单 将 能 鼓励 用 户 去 尝试 ， 这 不 仅 辟 励 
了 多 网 站 之 间 的 互联 (比如 说 ， 某 人 写 了 一 篇 博客 日 志 回 应 你 的 日 志 )， 
同时 还 增加 了 你 自己 网 站 的 访问 量 ， 因 为 在 其 他 网 站 阅读 日 志 的 人 有 可 
能 会 点 击 Trackback 过 来 看 你 的 文章 。 


同样 地 ， 每 一 个 Trackback 的 摘录 都 会 指向 其 原文 所 在 的 站 点 ， 因 此 用 户 
可 以 点 击 去 看 那些 日 志 ， 从 而 能 够 对 主题 了 解 得 更 多 ， 或 者 看 看 其 他 人 
的 看 法 。 


再 后 面 就 是 评论 部 分 ， 见 图 22-4。 标 题 中 显示 了 评论 的 数量 。 这 个 地 方 
同时 还 提供 了 一 个 链接 以 便 订阅 所 有 的 评论 (很 常见 的 情况 ， 在 对 某 篇 
日 志 发 表 评论 之 后 ， 我 们 和 希望 能 看 到 其 他 人 的 反应 ， 但 总 是 忘记 回来 查 
看 。 而 如 果 用 RSS 订阅 了 评论 ， 任 何 时 候 打 开 RSS 阅读 器 你 都 能 获得 最 
新 的 评论 )。 


最 后 是 一 个 简短 的 表单 ， 让 用 户 发 表 评 论 。 人们 之 间 的 交流 只 需 一 点 必 
需 的 信息 一 一 你 的 名 字 和 网 址 〈 选 填 项 )。 你 的 名 字 将 会 显示 在 你 的 评论 
上 方 ， 而 且 它 还 能 指向 你 的 个 人 网 站 ， 如 果 你 有 的 话 。 这 意味 着 写 点 评 
论 就 能 够 增加 你 自己 网 站 的 访问 量 ， 这 也 更 加 鼓励 了 人 们 交流 。 

让 表单 尽 可 能 地 短小 简练 将 有 助 于 人 们 主动 地 发 表 评 论 。 如 果 这 件 事 很 
简单 又 很 有 价值 ， 那 么 我 们 就 会 去 做 。 而 且 短 小 的 表单 将 使 这 个 决定 更 
加 容易 。 
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3 comments (Subseribe to comments) 
Someone said: 


Lorem ipsum dolor sit amet, consectetuer adipiscing elt, 
Maecenas vulputate sodales dolor. Lorem ipsum dolor sit 
amet, consecietuer adipiscing elit. Phasellus in arcu. Cras 
sem urna. gravida egot, facilisis a, vulputate eget, arcy, 
Quisque mi diam, cursus 9, dapibus non, ornare nec, mi, 
Fusce et nunc vitae mi porta imperdiet Etiam non quam,. 
Poeleniesaue tortor. Duis vesiibulum velit et lectus. 


Someone said: 





Lorem ipsum dolor sit amet, consectetuer adipiscing elt, 
Maecenas vulputate sodales dolor. 


Someone said: 

Lorem ipsum dolor sit amet, consectetuer adipiscing ett, 
Maecenas vulputate sodales dolor. Lorem ipsum dolor sit 
amet, consecietuer adipiscing elit. Phasellus in arcu. Cras 


sem unma. gravida eget, facilisis a. vulputate eget, arcy. 
Quisque mi dism. cursus a, dapibus! 


Add a comment 
Name: 


LDL |] 


Your web site (optional): 


Message: 





图 22-4 


左 侧 的 工具 栏 中 有 一 个 搜索 栏 ， 如 图 22-5 所 示 。 其 后 是 几 个 链接 模块 ， 
分 别 指向 网 站 其 他 栏目 、 相 关 的 日 志 ， 以 及 最 受 欢 迎 日 志 。 这 些 链接 列 
表 将 鼓励 用 户 阅 读 网 站 中 的 其 他 日 志 。 而 更 进一步 ， 页 面 右 侧 的 模块 提 
供 了 指向 其 他 日 志 分 类 的 链接 ， 见 图 22-6。 


右 侧 工 具 栏 还 提供 了 指向 前 一 篇 和 后 一 篇 日 志 的 链接 ， 每 一 个 都 被 清晰 
地 标示 出 来 。 


最 后 ， 右 侧 工 具 栏 的 项 部 还 提供 了 一 个 大 的 Subscribe (订阅 ) 按钮 。 通 
俗 易 懂 的 术语 和 便于 点 击 的 按钮 将 会 鼓励 用 户 订阅 RSS Feed， 至 少 也 能 
通过 RSS 订阅 页 面 上 的 信息 进一步 地 了 解 RSS。 








Bess, 
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In this site 


Mai 
Main nav link 





Main nav link 





Related posts 
Related post link 
Related post link 
Related post link 











Related post link 











图 22-5 
22.1.2” 别 跟着 傻瓜 上 路 
令 人 悲哀 的 是 ， 到 写 这 一 章 为 止 ， 连 我 自己 的 博客 都 还 没 能 做 出 相应 的 
修改 。 我 能 有 什么 资格 告诉 你 们 这 人 么 做 才 是 对 的 呢 ? 不 过 ， 尽 管 在 开始 
设计 这 个 博客 模板 时 我 没有 使 用 任何 设计 工具 ， 但 仍然 有 相当 邻 人 称奇 
的 地 方 : 300 个 博客 的 狂热 分 子 。 

而 本 章 所 讨论 的 设计 都 是 他 们 认为 应 该 做 到 的 。 

合作 化 和 职业 化 的 博客 行为 仍然 是 一 个 相当 新 的 想法 ， 但 是 用 诚 尽 、 真 
实 的 声音 与 客户 对 话 ， 将 能 快速 地 增加 你 的 吸引 力 。 这 是 接近 受众 想法 
和 观念 最 好 的 办 法 之 一 ， 而 且 能 够 提高 宝贵 的 用 户 忠 诚 度 ， 就 像 Apple、 
Google 和 37Signals 那些 公司 一 样 。 
为 自己 的 博客 设计 多 付出 一 些 努 力 ， 那 么 你 和 用 户 间 沟通 的 能 力 将 有 显 
著 的 不 同 。 通 过 Trackback 和 评论 来 辟 励 交流 、 为 博客 日 志 氛 写 概 要 、 为 
相关 内 容 提 供 链接 ， 这 些 都 是 很 保险 的 方法 ， 不 仅 能 改善 你 的 博客 ， 同 
时 也 会 为 你 带 来 忠诚 的 用 户 。 

在 接 下 来 几 天 里 ， 我 希望 能 有 了 时间 把 这 些 点 子 应 用 到 自己 的 博客 里 面 去 。 
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第 23 章 
邀请 讨论 











本 章 我 的 观点 并 不 是 出 自 于 某 一 个 项 目 。 实 际 上 ， 它 们 来 自 于 我 曾 从 事 
的 与 洲 请 用 户 添加 回复 、 扎 写 评论 或 者 在 论坛 中 参加 讨论 相关 的 几乎 每 


一 个 项 目 。 























每 当 经 手 类 似 的 项 目 ， 我 总 是 会 被 问 到 同样 的 问题 。 差 不 多 就 好 像 这 样 : 


| “我 们 正在 考虑 是 否 应 该 对 评论 加 以 控制 。 你 对 这 件 事 看 法 如 
何 ? ” 





也 许 你 已 经 猪 到 了 ， 隐 藏 在 这 个 问题 背后 的 驱动 因素 其 实 就 是 么 惯 。 


对 于 由 用 户 自 行 发 表 的 评论 ， 他 们 怒 慨 有 人 可 能 会 说 一 些 对 网 站 不 利 的 
坏话 ， 害 怕 有 人 会 冒犯 其 他 用 户 ， 还 担心 自己 的 员工 可 能 会 忘记 检查 评 
论 而 没有 确保 让 每 个 人 都 玩 得 开心 。 


而 在 这 些 背 后 ， 他 们 又 恐 惯 自己 的 员工 将 不 得 不 把 每 天 的 时 间 都 浪费 在 
可 笑 的 看 管 和 删除 评论 上 。 


下 次 如 果 有 人 再 问 我 这 个 问题 ， 我 准备 让 他 们 看 看 这 一 音 ， 因 为 我 一 直 
秉承 如 下 的 观点 。 


C23.1 让 你 的 顾客 发 表意 见 


一 句 话 ， 不 要 控制 任何 东西 。 


不 要 控制 留言 、 评 论 、 论 坛 回复 ， 或 者 其 他 相关 的 任何 东西 。 为 什么 
呢 ? 因为 控制 将 会 带 来 严重 的 负面 效果 。 


它 会 让 客户 觉得 你 在 隐瞒 着 什么 东西 。 
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比如 次 ， 为 某 个 产品 写 评论 时 ， 我 们 相信 自己 是 以 茶 种 方式 在 帮助 其 他 
可 能 的 消费 者 决定 是 否 应 该 购买 这 个 产品 。 否 则 我 们 为 什么 要 写 评论 ? 


因此 ， 如 采 我 们 想 说 的 是 好 话 ， 就 表示 我 们 很 高 兴 ， 欣 然 愿意 为 这 个 产 
品 做 宣传 ， 而 这 也 正 是 生产 该 产品 的 公司 所 希望 的 。 很 明显 ， 这 对 那 家 
公司 来 说 是 件 好 事 。 

但 是 ， 如 果 我 们 有 些 负面 的 话 想 说 ， 表 示 正 在 试图 用 自己 的 遭遇 来 警告 
其 他 用 户 。 此 举 并 不 总 是 带 有 恶意 。 最 常见 的 ， 我 们 只 是 想 把 使 用 中 遇 
到 的 问题 和 困难 说 出 来 ， 让 其 他 人 能 事先 知道 ， 而 不 会 因为 遇 到 同样 的 
事情 而 惊讶 。 是 的 ， 有 些 时 候 我 们 也 会 想 要 挥 着 小 红旗 指挥 人 们 尽 可 能 
地 远离 某 个 产品 ， 但 总 的 来 说 ， 绝 大 部 分 产品 还 没有 差劲 到 如 此 地 步 。 


如 果 我 们 写 了 这 种 警告 性 的 文章 ， 然 后 被 告知 这 些 评 论 需 要 先 通 过 审查 
才能 发 表 出 来 ， 我 们 就 很 有 可 能 会 对 该 网 站 丧失 一 部 分 信任 感 。 不 管 是 
有 意 还 是 无 意 ， 我 们 都 会 猜测 是 否 文章 在 发 表 之 前 就 会 被 强大 的 审查 者 
枪 比 挤 。 而 且说 实话 ， 因 为 忙碌 的 生活 ， 我 们 并 不 一 定 很 想 回 到 网 站 去 
检查 自己 的 评论 是 否 能 发 表 。 如 果 当 时 不 能 看 到 结果 ， 我 们 的 兴趣 也 就 
消失 了 。 当然 ， 如 果 我 们 真 的 有 很 难听 的 话 想 说 ， 可 能 会 强制 自己 回来 
检查 ， 以 便 确 定 那些 讨厌 的 审查 者 是 否 通过 了 评论 。) 


而 除了 我 们 因为 种 种 怀疑 而 感到 受 了 胁迫 之 外 ， 生 产 该 产品 的 公司 几乎 
什么 都 没 得 到 。 


事实 上 ， 员 工 们 每 天 花费 宝贵 的 数 分 钟 或 数 小 时 来 管理 这 些 评论 ， 而 公 
司 实际 上 在 付 钱 抛洒 自己 消费 者 的 信任 。 


23.1.1 一 个 关于 信任 的 问题 
有 一 些 很 好 的 理由 可 以 让 你 完全 不 再 思考 评论 的 问题 。 


首先 ， 让 你 的 顾客 自由 发 表意 见 以 表示 你 信任 他 们 的 谈论 。 他 们 称赞 时 ， 
你 放手 让 他 们 去 宣传 ， 他 们 说 了 不 好 听 的 话 时 ， 你 也 相信 和 他们 的 看 法 有 
一 定 意义 。 而 正如 我 们 都 知道 的 ， 信 任 才 是 建立 所 有 成 功 关 系 的 基石 。 


其 次 ， 这 表示 你 信任 用 户 自 身 的 判断 能 力 。 不 去 防范 每 一 条 负面 评论 或 
者 论坛 争论 ， 你 相信 用 户 会 运用 他 们 自身 的 才智 、 常 识 和 经 验 过 滤 纯 负 
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面 的 内 容 ， 在 字里行间 寻求 信息 ， 然 后 得 出 结论 。 


换 名 话说， 给 用 户 自 己 做 判断 的 权利 ， 而 他 们 上 自然 会 忽略 那些 无 用 的 评 


论 。 


如 果 这 些 理由 还 不 够 ， 你 还 可 以 通过 这 种 方式 让 那些 未 经 过 滤 的 声音 为 
自己 所 用 ， 也 就 是 招募 自己 的 Otaku。 


23.1.2 ”起 用 你 的 Otaku 


正如 Wikipedia (维基 百科 ) 所 描述 的 ，Otaku 是 一 个 术语 ， 用 于 形容 那 
些 “对 某 些 领域 有 着 痴迷 热情 的 狂热 者 " (这 个 术语 本 来 主要 用 于 形容 
热衷 于 日 本 动漫 的 人 ， 然 而 自从 营销 大 师 Seth Godin 在 一 次 演讲 中 提 到 
这 个 词 后 就 被 广泛 引用 开 来 )。 

那些 抱怨 声 最 大 的 人 、 欢 呼 得 最 热烈 的 人 、 当 有 人 需要 解答 问题 时 尽 自 
己 最 大 帮助 的 人 ， 还 有 总 是 在 你 身边 告诉 你 他 们 正在 想 什么 的 人 ， 这 些 
人 就 是 你 的 Otaku。 而 你 可 以 让 他 们 帮助 你 。 


让 顾客 们 公开 地 抱怨 你 的 产品 、 在 论坛 里 表达 他 们 的 诅 形 ， 或 者 征讨 公 
司 发 表 的 言论 。 通 过 这 些 你 便 拥 有 发 现 人 们 真实 想法 的 能 力 。 而 任何 一 
个 不 受 约束 的 看 法 都 比 黄金 还 值钱 。 


首先 ， 满 怀 激 情 地 届 恶 也 比 毫 不 关心 的 冷漠 要 好 得 多 。 那 些 最 恨 你 的 人 ， 
在 你 真正 开始 为 他 们 考虑 的 那 一 刻 ， 往 往 会 转变 成 最 坚定 的 拥护 者 。 如 
果 你 能 做 到 这 一 点 ， 那 么 就 能 少 一 个 曾经 的 叫嚣 者， 而 多 一 个 终生 的 朋 
友 。 

其 次 ， 你 还 可 以 通过 组 织 手段 重 塑 顾客 体验 。 比 如 说 ， 你 可 以 联系 那些 


喜欢 到 处 宣扬 的 不 安 份 分 子 ， 表 示 你 非常 感谢 他 们 提供 的 反馈 以 及 专业 
意见 ， 然 后 邀请 他 们 加 入 志愿 者 团队 ， 在 论坛 里 帮助 其 他 用 户 回 答 问题 。 









































Q) Otaku( 书 太 《 ) 一 词 原 指 动漫 与 游戏 的 爱好 者 ， 即 “ 御 宅 族 ”。 现 今 该 词 也 可 用 于 
指称 其 他 方面 的 狂热 者 ， 或 对 某 种 领域 具有 和 较 深 造 证 的 人 尤其 是 较 特 殊 的 领域 )， 

如 “军事 御 宅 ”等 。 在 中 国 网 络 流行 用 语 中 有 许多 运用 “ 宅 ” 字 自 创 的 词汇 ， 如 

“ 宅 人 六 “宅男 〈 女 )” 不 过 多 半 已 经 与 御 宅 族 的 本 质 无 关 而 沦 为 戏 庆 他 人 的 莽 称 。 
一 一 译 者 注 
@ Seth Godin( 赛 斯 ,高 汀 ) 是 20 世纪 90 年 代 后 期 以 来 一 系列 商业 领域 专著 的 作者 ， 
也 是 一 位 演讲 家 。 其 第 一 部 畅销 书 是 关于 特许 营销 (permission marketing) 的 著作 。 
一 一 译 者 注 
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作为 交换 条 件 ， 你 可 以 为 他 们 签署 同意 书 支 付 一 些 酬 劳 ， 给 他 们 与 内 部 
员工 直接 交流 的 机 会 ， 赠 送 工 恤 或 棒球 帽 之 类 的 免费 礼品 ， 甚 至 造势 让 
他 们 成 为 网 站 里 的 交际 明星 。 


举 个 例子 ，Adobe 公司 推广 过 一 项 名 为 Adobe Community Experts 
(Adobe 社交 专家 ,简称 ACE)〉 的 计划 ”， 目 的 是 为 了 奖励 积极 支持 
Adobe 产品 的 社区 活跃 分 子 。( 这 些 人 不 仅仅 只 是 参与 论坛 讨论 ， 他 们 可 
能 还 发 表 过 文章 、 出 版 过 书籍 或 者 做 过 以 Adobe 为 主题 的 演讲 等 等 。4) 入 
选 者 的 个 人 简介 将 会 在 Adobe.com 上 公布 ， 同 时 还 得 到 特制 的 证 书 图 片 ， 
以 便 能 在 个 人 网 站 上 发 布 ， 证 明 自 己 获得 了 Adobe 公司 高 度 的 信赖 和 重 
视 。 这 些 入 选 者 还 将 受到 Adobe 职员 的 款待 ， 得 到 很 多 内 幕 消 息 ， 并 且 
能 与 Adobe 开发 团队 直接 地 沟通 。 


Adobe 公司 并 没有 为 这 些 人 支付 酬劳 。ACE 的 成 员 都 是 专家 级 的 志愿 者 。 
从 这 方面 来 看 ， 他 们 可 能 也 是 Adobe 最 好 的 一 个 拥护 者 群体 了 。ACE 写 
文章 ， 在 会 议 或 者 用 户 集会 上 讲话 ， 还 在 论坛 里 帮 人 们 解决 问题 。 


而 这 件 事 的 背后 是 Adobe 为 自己 组 建 了 一 个 预备 役 。 这 些 人 整 天 挂 在 论 
坛 上 回答 问题 、 提 供 建 议 并 给 其 他 用 户 做 些 推 荐 。 有 些 人 可 能 认为 不 管 
理 留 言 表示 公司 对 论坛 不 够 重视 ， 而 其 他 用 户 也 不 会 理 昭 这 些 留言 。 但 
有 Otaku 团队 在 ， 他 们 会 解决 问题 。 他 们 活跃 在 Adobe 的 论坛 以 及 世界 
各 地 的 用 户 组 讨论 列表 中 ， 他 们 是 Adobe 的 客户 服务 第 一 线 的 重要 成 员 。 
Adobe 将 通过 ACE 获知 负面 评论 ， 同 时 也 能 看 到 高 度 赞扬 的 评论 。 


设想 一 下 。 如 果 你 的 公司 也 有 这 样 一 群 人 在 宣扬 你 的 Web 应 用 ， 同 时 在 
社区 里 帮助 你 解决 问题 ， 那 会 是 怎样 一 种 感觉 ? 而 且 ， 当 这 些 专 家 们 抱 
怨 时 ， 你 将 知道 那 肯定 不 会 是 无 移 之 谈 ， 而 当 他 们 吹捧 你 的 产品 时 ， 肯 
定 也 会 有 很 多 人 相信 他 们 的 选择 。 他 们 其 实 是 在 为 你 做 营销 。 

































































Q@ ACE 计划 的 对 象 是 积极 贡献 和 分 享 Adobe 产品 使 用 经 验 及 知识 的 Adobe 消费 者 。 
具体 来 说 ， 是 那些 积极 在 Adobe 论坛 帮助 其 他 用 户 ， 在 各 种 在 线 社 区 提供 Adobe 技 
术 支 持 或 信息 ， 在 专业 出 版 物 中 发 表 文 章 ， 以 及 在 会 议和 用 户 组 中 进行 关于 Adobe 
产品 演讲 的 各 种 用 户 。 该 计划 网 址 为 http://www.adobe.com/communities/experts/。 

译 者 注 
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23.1.3 ”标记 那些 来 犯 者 

最 后 ， 为 了 消除 你 可 能 的 最 后 一 点 担心 ， 我 们 也 可 以 通过 “无 痛 ” 的 控 
制 方式 来 添加 一 点 功能 ， 提 升 一 些 安全 系数 :标记 系统 。 

在 每 一 篇 留言 、 回 复 、 论 坛 帖 子 、 日 志 评 论 旁边 加 一 个 小 小 的 “标记 ” 
图 标 。 这 些 图 标 可 以 点 击 ， 用 户 能 对 某 篇 评论 进行 标记 ， 通 知 公司 员工 
对 其 检查 。 

通过 这 种 方式 ， 当 某 个 无 赖 净 到 你 的 论坛 里 时 ， 其 他 人 就 可 以 告诉 你 他 
们 受到 了 打扰 ， 让 你 处 理 。 

这 个 “标记 ”图 标 将 用 户 引领 到 一 个 简单 的 表单 ， 他 们 可 以 写 下 为 什么 
这 条 评论 应 该 检查 。 不 多 不 少 ， 保 持 这 种 简单 。 而 且 ， 别 要 求 你 不 需要 
的 任何 东西 (例如 用 户 的 电子 邮件 地 址 ， 因 为 当 用 户 登录 时 你 已 经 得 到 
了 )。 


23.1.4 “为 他 们 让 路 


以 上 ， 我 的 朋友 们 ， 当 有 人 问 我 如 何 看 待 控制 评论 时 ， 我 回答 的 就 是 这 
些 内 容 。 一 字 不 差 。 


你 不 需要 控制 任何 东西 。 
打开 闸门 ， 让 你 的 用 户 自由 地 发 表意 见 。 为 他 们 让 路 。 


只 需 一 点 点 的 谦 插 和 一 点 点 的 驾驭 ， 你 就 能 把 自己 的 大 部 分 顾客 转变 成 
忠诚 而 又 活跃 的 追随 者 和 拥护 者 。 你 可 以 把 自己 的 恕 惧 转变 为 一 种 工具 ， 
以 它 作 为 驱动 力 来 收集 顾客 提供 的 信息 、 发 展 Otaku， 提 供出 众 的 客户 服 
务 ， 而 且 在 你 的 公司 和 用 户 之 间 建 立 起 一 种 相互 信任 的 文化 。 


而 这 些 为 你 万 得 的 回报 ， 将 会 远 远 超过 你 去 控制 它们 的 所 得 。 
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从 Amazon 到 Yahoo 再 到 Yelp 了”， 五 星 评 级 系统 随处 可 见 ， 但 是 各 自 执 
行 起 来 却 常常 有 所 差异 。 


比如 说 ， 它 们 经 常会 分 成 两 个 部 分 ， 并 显示 在 页 面 的 不 同 区 域 。 其 中 一 
部 分 是 展示 版 本 ， 它 告诉 用 户 现 在 已 有 的 评定 结果 。 男 一 部 分 则 是 编辑 
版 本 ， 用 户 可 以 在 那里 选择 自己 对 某 事 物 的 评分 ， 例 如 书籍 、 唱 片 或 者 
某 篇 文章 。 


















































在 这 些 评级 系统 中 ， 其 中 有 些 还 会 在 鼠标 悬 停 到 星星 上 时 显示 说 明 性 文 
本 ， 告 诉 用 户 每 颗 星 代表 的 等 级 。 有 些 系 统 需要 先 点 击 某 颗 星 然后 再 点 
Save 按钮 ， 有 些 则 只 需要 点 击 某 颗 星 。 











但 当 你 只 需要 点 击 茶 颗 星 时 ， 除 了 星星 从 白色 变 成 黄色 或 者 其 他 颜色 ) 
之 外 ， 你 无 法 得 到 系统 的 回馈 ， 也 就 是 说 你 感觉 不 到 交互 是 否 已 经 完成 。 
这 种 设计 让 用 户 (包括 我 在 内 ) 无 法 对 自己 的 操作 建立 信心 。 

这 些 都 是 每 当 我 要 设计 五 星 评级 系统 时 所 考虑 的 问题 。 

甚至 某 些 情况 下 ， 由 于 页 面 空 间 有 限 ， 我 还 需要 把 这 两 个 部 分 合 二 为 一 。 
我 需要 通过 某 种 方式 使 这 个 单独 的 界面 控件 里 既 能 显示 当前 的 等 级 情况 ， 
又 能 让 用 户 自己 评级 。 
下 面 将 展示 我 现在 是 如 何 做 的 ， 然 后 再 告诉 你 们 以 前 我 为 之 犯 过 的 错误 。 






























































Q@ Yelp 是 一 个 关于 旧金山 当地 商业 机 构 的 用 户 评述 汇总 网 站 ， 诞 生 于 2004 年 10 月 。 
j 户 在 Yelp 上 给 当地 的 各 种 店铺 打分 留 评 语 ， 在 论坛 里 讨论 ， 也 能 通过 Yelp 在 本 
邮 找 到 衣食 住 行 的 各 种 信息 。 网 址 为 http:Wwww.yelp.com/。 一 一 译 者 注 
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C24.1 清晰 胜 于 效率 


为 了 把 展示 界面 和 编辑 界面 揉 合 到 一 起 ， 我 把 它们 分 成 了 两 个 部 分 : 一 
部 分 负责 显示 ， 另 一 部 分 负责 交互 。 最 开始 是 单纯 用 于 展示 的 五 颗 星 ， 
右 侧 则 是 局 动 评分 行为 的 链接 ， 如 图 24-1 所 示 。 


家 吝 衣 次 将 Bate this widget {Rated 14 times) | 


图 24-1 


为 了 让 用 户 能 选择 自己 的 评级 ， 在 他 们 单 击 Rate this widget (为 此 评分 ) 
链接 后 那 组 星星 将 进入 可 编辑 状态 ， 并 且 即 由 黄 变 日 。 


当然 ， 用 户 也 需要 保存 评分 结果 并 回 到 展示 状态 ， 因 此 Rate this widget 
链接 被 蔡 换 成 了 Save (保存 ) 和 Cancel (取消 ) 选项 ， 这 也 向 用 户 声明 
现在 可 以 编辑 了 。 见 图 24-2。 


用 户 单 击 Rate this widget 链接 ， 然 后 点 击 他 们 认为 合适 的 星星 来 评定 等 
级 。 图 24-3 中 ， 用 户 的 评分 为 3 颗 星 。 


帘 帘 帘 帘 席 Save ee 认识 识 浆 交 save mo | 
图 


图 24-2 始 24-3 














在 这 里 ， 他 们 可 以 单 击 Save、Cancel 或 者 另 一 颗 星 。 让 我 们 假设 现在 该 
用 户 选 择 保存 自己 的 评分 〈 同 时 他 更 改 评分 为 四 星 ， 如 图 24-4 所 示 )。 


赤 吉 直 赤 站 Rate this widget (Rated 15times) | 


图 24-4 
保存 之 后 ， 系 统 将 计算 最 新 的 等 级 平均 值 ， 然 后 再 次 回 到 展示 状态 显示 


新 的 评定 结果 。 连 同 Saved! (已 保存 ! ) 的 文本 一 起 ， 这 将 通知 用 户 交 
互 已 经 完成 ， 同 时 他 的 评分 已 记录 在 案 。 在 展示 状态 下 他 们 也 能 更 改 评 
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分 ， 见 图 24-5 右 侧 的 Change your rating (修改 你 的 评分 ) 链接 。 


喜 吉 吉 赤 站 Saved! (Rated 15 times) Change yourraling， | 


图 24-5 


我 在 Rate this widget 链接 后 面 还 加 了 一 点 文本 ， 显 示 已 有 多 少 位 用 户 进 
行 了 评分 : Rated 15 times (共有 15 次 评分 ) (这 里 的 15 是 动态 取 值 )。 
这 不 仅 能 够 告诉 当前 用 户 自 己 所 做 评级 在 系统 中 所 占 的 百分比 ， 同 时 还 
回 他 们 证 实 自己 的 评级 结果 已 添加 《〈 很 明显 之 前 的 数字 应 该 是 14)。 


最 后 ， 在 交互 中 加 入 了 一 些 逻 辑 判 断 ， 以 防止 茶 位 用 户 为 单个 对 象 多 次 
评分 。 也 就 是 说 ， 如 果 他 在 日 后 又 评选 了 另 一 个 等 级 ， 平 均值 将 会 更 新 ， 
但 是 评分 者 的 个 数 不 会 改变 。 


将 展示 和 编辑 版 本 合 为 一 个 评级 系统 ， 有 好 处 也 有 坏处 。 


从 好 处 来 说 ， 它 占 的 位 置 比 两 部 分 分 开 的 版 本 要 少 ， 因 为 你 只 需 在 页 面 
上 找 一 小 处 地 方 来 放置 它 就 行 了 。 


而 不 好 的 地 方 在 于 ， 这 种 设计 中 完成 交互 所 需 的 步骤 比 其 他 设计 要 多 。 
但 关键 是 这 种 设计 中 交互 的 每 一 个 步骤 都 非常 清楚 、 直 接 。 


就 像 刚才 所 说 的 ， 两 部 分 的 版 本 可 以 简单 到 只 需要 点 击 某 颗 星 而 已 ， 但 
是 系统 无 法 提供 反馈 ， 你 无 法 知道 自己 的 评分 是 否 被 保存 ， 或 者 是 否 有 
效 。 将 两 个 功能 结合 在 一 起 意味 着 你 的 每 一 步 都 能 得 到 一 个 清晰 的 结 


单 击 Rate this widget， 界 面 将 进入 可 编辑 状态 。 点 击 某 颗 星 将 把 它 变 成 黄 
色 。 单 击 Save 让 你 知道 自己 的 评级 结果 已 被 保存 ， 等 级 平均 值 和 评级 总 
人 数 都 将 会 更 新 。 

现在 的 交互 确实 需要 更 多 的 步骤 ， 但 是 它 做 得 更 好 的 地 方 在 于 提供 了 适 
当 的 反馈 ， 所 以 用 户 能 在 与 该 系统 交互 的 每 一 个 瞬间 都 保持 自信 ， 并 且 
每 一 步 都 很 清晰 。 

换 名 话说， 效率 并 不 一 定 是 所 有 问题 的 答案 。 我 们 在 第 16 章 看 过 那个 保 
险 公 司 的 案例 ， 最 短 的 并 不 一 定 就 是 最 好 的 。 
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比 效率 更 重要 的 是 清晰 。 对 于 那些 第 一 次 来 到 网 站 ,或 者 执行 自己 不 太 
熟悉 的 任务 的 用 户 来 说 ， 最 好 是 让 每 一 个 瞬间 都 尽 可 能 地 易于 理解 。 对 
于 那些 对 使 用 产品 很 有 经 验 ， 或 者 执行 非常 普通 的 任务 的 用 户 来 说 ， 则 
最 好 是 尽量 缩短 流程 ， 别 让 过 程 变 得 让 人 厌烦 。 不 管 是 哪 种 情况 ， 最 关 
键 的 是 让 每 个 步骤 都 清晰 易 懂 ， 同 时 不 太 复 杂 。 


用 户 一 般 不 会 频繁 地 和 评级 系统 打交道 ， 而 且 还 得 面 对 不 同 网 站 的 各 种 
版 本 。 因 此 我 于 可 稳妥 一 点 : 只 求 清晰 ， 不 求 效率 。 


信任 该 信任 的 


我 兽 经 使 用 过 上 述 设 计 ， 但 是 其 中 没有 Rated 15 times 的 说 明 ， 那 只 是 由 
于 我 当时 还 没有 想到 。 那 时 ， 我 认为 自己 已 经 得 到 了 一 个 足够 棒 的 设计 ， 
并 且 在 一 次 关于 Designing the Obvious 的 演讲 中 谈 到 了 它 。 


当时 有 一 位 听众 建议 说 这 个 系统 里 面 应 该 声明 已 经 有 多 少 人 进行 了 评分 ， 
这 能 帮助 用 户 更 好 地 判断 自己 的 评级 是 否 有 意义 。 毕 竟 ， 如 果 只 有 一 个 
人 做 了 评价 ， 哪 怕 是 五 星 ， 也 并 不 一 定 就 表示 这 个 产品 很 伟大 。 它 只 表 
示 现 在 有 一 个 人 认为 这 个 产品 很 伟大 而 已 。 


而 如 果 有 30 个 人 给 它 评 四 星 半 ， 相 比 之 下 则 会 有 意义 得 多 。 

我 站 在 那里 ， 心 里 想 ， 这 真是 个 好 点 子 。 

我 告诉 那 位 可 敬 的 先生 我 将 科 穷 他 的 想法 ， 并 且 会 用 到 我 的 下 一 本 书 里 。 
所 以 ， 我 在 此 专门 提 及 此 事 。 谢 了 ， 伙 计 。 
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让 RSS 更 有 意 久 .ee 
= 
通过 拖 放 来 组 织 信息 ……………… 
用 系统 通知 来 管理 中 断 …………… 
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几乎 每 一 天 ， 我 都 要 花 上 两 三 个 小 时 来 处 理 电 子 邮 件 、 浏 览 新 闻 、 阅 读 
博客 日 志 ， 然 后 再 查看 那些 Blog 里 所 有 我 感 兴趣 的 链接 。 这 还 算是 好 
的 ， 有 时 候 根 本 不 止 两 三 小 时 。 


毫 无 疑问 ， 我 是 想 一 下 子 管理 太 多 的 信息 ， 但 这 个 话题 我 们 可 以 换个 时 
间 来 讨论 (还 有 ， 我 在 给 客户 账单 时 可 从 没 把 这 些 时 间 也 算 进去 )。 


我 想 说 的 是 ， 网 上 的 信息 量 极其 巨大 ， 而 管理 它们 可 是 一 项 绝 不 轻松 的 
工作 。 我 们 每 天 为 管理 这 些 数据 分 类 所 花费 的 时 间 都 只 是 为 了 达到 一 个 
目的 : 组 织 它 们 。 这 样 我 们 才 会 觉得 自己 是 生活 积极 的 参与 者 ， 而 不 是 
思春 地 让 珍贵 的 时 间 缴 缴 流 逝 。 


对 于 那些 访问 我 们 网 站 或 者 使 用 我 们 产品 的 人 来 说 也 是 一 样 ， 他 们 在 网 

上 需要 学 习 新 知识 ， 需 要 做 计划 ， 以 及 其 他 各 种 各 样 的 事情 。 不 管 有 没 
意识 到 ， 他 们 一 直 都 在 乞求 用 科学 的 方法 有 效 地 获得 每 天 最 想 要 的 信 
息 。 而 尽管 现在 有 很 多 相关 的 技术 ， 但 是 大 部 分 仍然 未 能 进入 主流 。 


即使 是 RSS 这 种 从 可 信赖 站 点 获取 新 闻 及 行业 见解 的 解决 方案 ， 也 仍然 
没 能 成 为 一 个 能 被 广泛 理解 的 典型 范例 ， 更 别 说 成 为 家 喻 户 晓 的 词汇 了 。 


因此 ， 在 接 下 来 的 几 间 中， 我 们 将 针对 如 何 推动 信息 管理 加 以 阐述 。 我 
们 将 讨论 如 何 把 诸如 RSS 和 Tag( 自 定义 标签 ) 模式 等 陌生 的 想法 阐述 
得 更 有 实际 意义 、 如 何 通过 拖 放 操作 来 组 织 页 面 内 容 ， 以 及 如 何 使 用 系 
统 通知 来 管理 中 断 。 

我 们 甚至 还 会 讨论 为 改变 而 设计 的 概念 ， 这 样 用 户 就 能 在 一 头 掉 进 完全 
轿 新 的 设计 而 晕 头 转向 之 前 先 适 应 你 的 想法 。( 我 们 已 经 对 此 考虑 得 足够 
多 了 ， 一 点 不 需要 夸张 ! ) 


这 些 瞬 间 都 应 该 表现 得 非常 简单 ， 并 且 我 们 有 几 种 途径 可 以 达到 这 个 目 
标 。 
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要 想 让 用 户 战胜 对 新 生 Web 技术 的 陌生 感 并 加 以 运用 ， 最 困难 的 一 点 就 
是 首先 要 意识 到 人 们 并 不 关心 技术 本 身 ， 而 是 关心 自己 能 得 到 什么 。 我 
们 推广 的 并 不 是 技术 ， 而 是 技术 所 能 带 来 的 好 处 。 


为 了 说 得 更 明白 ， 我 们 来 看 看 RSS。RSS 由 于 各 种 原因 并 没有 获得 广泛 
认可 ， 造 成 的 原因 有 很 多 。 比 如 ， 学 习 新 事物 有 潜在 的 困难 。 再 比如 ， 
使 用 News Reader (新闻 阅 读 右 〉 所 带 来 的 好 处 也 许 并 不 值得 我 去 安装 ， 
并 让 它 进入 自己 的 正常 生活 。 而 更 重要 的 原因 是 ， 事 实 上 绝 大 部 分 人 其 
至 包括 一 些 已 经 使 用 News Reader 的 人 根本 就 不 知道 RSS 这 个 词 到 底 是 
什么 意思 。 这 几 个 缩写 字母 常常 被 用 在 某 个 按钮 上 ， 指 向 订阅 页 面 。 但 
因为 不 理解 RSS 的 意思 ， 用 户 也 很 少 会 去 单 击 这 些 按钮 。 毕 竞 ， 按 钮 标 
签 应 该 在 用 户 脑 海中 建立 清晰 的 预期 ， 并 且 告 诉 他 们 点 击 后 将 会 发 生 什 
么 。 


推广 某 项 新 技术 时 ， 我 们 的 首要 目标 应 该 是 让 它 通俗 易 懂 。 人 们 愿意 学 
习 新 的 想法 ， 但 这 些 想 法 必须 能 够 学 习 。 这 一 点 对 于 任何 新 技术 都 是 适 
用 的 。 

有 些 网 站 在 启用 RSS 时 已 经 开始 尝试 解决 这 一 问题 。 

FeedBurner.com "在 很 星 以 前 就 告诉 我 订阅 RSS 并 不 像 访问 牙医 那么 可 
怕 。 他 们 并 没有 显示 丑陋 、 冰 冷 、 满 是 XML 的 页 面 ， 然 后 等 着 用 户 自动 
明白 原来 需要 把 URL 复制 粘贴 到 阅读 需 里 面 去 。FeedBurner 在 这 里 表现 
得 更 为 友好 ， 如 图 25-1 所 示 。 












































































































































































































































QD FeedBurner.com 致力 于 通过 博客 和 了 SS Feed 的 形式 在 网 络 媒体 和 广大 受众 之 间 进 
行 联接 。 网 址 为 https://www.feedburner.com/fb/a/home。 译 者 注 
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Robert Hoekman, Jr. 


syndicated content powered by FeedBurner 








FeedBurner makes it easy to receive content updates 


in My Yahool Newsgator, Bloglines, and other news Subscribe Now! 



































readers. -With web-based news readers. Click your choice below: 

Learn more about syndication and FeedBurner... MYAOL 
hjo | EE 四 netvibes | 

A message from this feed's publisher: This is an XML 一 一 一 一 

content feed. Itis intended to be viewed in a 国 一 Ceo (和 rominwss 

newsreader or syndicated to another site, subject to .wiiholher readere: 


copyright and fair use. 


(Choose Your Reader) 


园 Get Robert Hoekman, Jr. delivered by email 


Embed this content on your site 
国 Embed with: SpringWidgets 











图 25-1 


他 们 展现 在 我 面前 的 是 一 个 相当 吸引 人 的 页 面 ， 有 着 整齐 的 博客 内 容 。 
而 在 越 来 越 多 的 在 线 和 桌面 RSS Reader 程序 冒 出 来 的 同时 ，FeedBurner 
提供 了 一 种 被 称 为 Chicklet 了 的 东西 。 它 只 需 点 击 一 次 就 能 轻而易举 地 订 
阅 Feed。 该 页 面 中 没有 任何 XML， 而 且 FeedBurner 也 避免 使 用 过 多 的 
专业 术语 。RSS 缩写 根本 没有 在 页 面 中 出 现 。 


谢谢 了 ，EFeedBurner， 不 胜 感激 。 


如 图 25-2 所 示 ，AddThis.com2 所 做 的 也 比较 类 似 。 他 们 在 页 面 上 丢 
了 一 堆 Chicklet， 这 样 任何 使 用 过 BlogReader 的 人 都 能 很 容易 地 订阅 。 
AddThis 同样 在 设计 中 完全 按 弃 了 RSS 的 缩写 ， 而 是 使 用 Feed Reader。 


这 些 网 站 在 将 新 点 子 通俗 化 方面 成 效 斐然 。 但 是 同时 它们 也 排斥 了 一 些 
东西 。 这 些 网 站 没有 提供 其 他 可 以 订阅 Feed 的 方法 ， 事 实 上 它们 只 关注 
通过 RSS Reader 来 订阅 。 














QD Chicklet 也 被 称 为 “社会 性 书签 ” 实际 上 就 是 一 种 小 图 标 ， 以 图 形 化 的 方式 声明 
Reader 的 出 处 ， 用 户 只 需 点 击 该 图 标 即 能 通过 所 选择 的 Reader 来 进行 订阅 。 









































译 者 注 
@) 和 FeedRurner 一 样 ，AddThis 同样 是 最 热门 的 Web2.0 网 站 之 一 。 它 可 以 说 是 网 上 
书签 和 共享 按钮 的 标准 制定 者 。 网 址 为 http://addthis.com/。 一 一 译 者 注 
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其 实 还 有 很 多 其 他 选择 。 我 决定 深入 探索 ， 看 看 如 何 能 把 其 他 方法 也 清 
楚 地 展示 出 来 ， 这 样 用 户 就 能 轻松 地 理解 并 且 运 用 它们 ， 而 且 这 样 做 的 
好 处 是 显而易见 的 。 





Add This .coM Home | My Account | About 


Subscribe to feed: 
Studio Sedition: Designing with Code [view xml 


Select from these web-based feed readers: 




















B | sloglines 
国 Addto Coogle 
加 Technorati B_netvibes | 
条 Windows Live 加 
Res 
| 





口 Please don't prompt me every time, send me directly to my favorite Feed reader. 
Tip: you can always go to "My Account" to reset this setting. 


GET YOUR BUTTON! RssFEE0 目 玛 理 - 


Get your own AddThis button! It will help your visitors subscribe to your feed, and 
promote it to the social services, sending you back more traffic. 





图 25-2 


C25.1 破译 其 他 选择 

首先 我 在 通 往 订阅 页 面 的 按钮 上 使 用 了 Subscribe (订阅 〉 的 标签 ， 而 不 
是 RSS。 使 用 能 够 建立 强烈 直观 印象 的 词汇 可 以 消除 语言 障碍 ， 并 且 降 
低 对 新 生 事物 的 学 习 曲 线 。 这 很 简单 。 

然后 我 借鉴 了 FeedBurner 的 方法 ， 在 页 面 上 创建 了 一 组 Chicklet。 这 里 
我 仍然 使 用 了 在 第 22 章 讨论 过 的 博客 模板 ， 如 图 25-3 所 示 。 

这 里 的 想法 是 向 用 户 展 现 一 个 看 上 去 仍 属于 本 网 站 的 页 面 ， 而 不 是 把 他 
们 送 到 类 似 FeedBurner 或 者 AddThis 那样 的 页 面 中 去 。 因 此 我 保留 了 工 
具 栏 中 的 站 点 导航 区 域 以 及 搜索 区 域 。 


那些 已 经 拥有 各 种 在 线 或 桌面 Reader 程序 的 人 ， 只 需 单 击 某 个 Chicklet 
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就 能 完成 订阅 。 


The Obvious Blog 


Short blog description goes here to provide context to 
Users who land on this page and have no idea what 
they're looking at. 


一 
CD | Subseribeto'"The Obvious Blog" Back to the blog 

Hf you already use one of the following RSS feed readers. 

dlick it to auto-subscribe to this blog. If not, clicking the 








In this site button will take you to a registration page- 
Main nav link 回 netvibes | 西口 "eurooor] 
Main nav link 

医 台 _ maot | 加 corse [+ E23 
Main nav link 





You can also simply copy the web address below and paste 
itinto the Add Feed [or similar) fiald in your RSS reader. 


| httpiieed. mydomain.com | Ceopy) 





图 25-3 


有 些 人 所 用 的 Reader 没有 在 页 面 中 列举 出 来 ， 我 也 为 他 们 提供 了 订阅 的 
方式 ， 并 在 旁边 附加 了 说 明 。 他 们 所 要 做 的 只 是 简单 地 把 Feed 地 址 复制 
并 粘贴 到 自己 的 Feed Reader 中 去 。 文 本 框 中 ， 网 址 已 经 默认 选中 ， 而 劳 
边 就 是 Copy (复制 ) 按钮 。 通 过 这 种 方式 ， 用 户 只 需 单 击 Copy 就 完成 
了 在 该 页 面 的 工作 。 


以 上 是 订阅 Feed 的 第 一 种 方法 ， 所 以 我 把 注意 力 放 在 了 其 他 选择 上 。 


首先 是 我 添加 了 一 个 选项 以 便 收取 关于 博客 更 新 的 电子 邮件 通知 。 见 图 
25-4 下 方 。 


有 些 网 站 ， 包 括 FeedBurner， 人 允许 用 户 把 RSS 转化 为 电子 邮件 的 
Newsletter( 时 事 通 讯 ) 订阅 服务 。 因 为 在 今天 这 是 一 件 很 容易 的 事情 ， 
所 以 我 们 无 需 任何 努力 就 能 添加 这 一 功能 。 实 际 上 ， 提 供 这 种 通过 电子 
邮件 获取 内 容 更 新 的 选择 将 会 极 大 地 增加 你 的 订阅 率 。 因 为 电子 邮件 仍 
然 是 网 络 营销 最 有 效 的 方式 之 一 〈 并 不 是 每 个 人 都 阅读 博客 日 志 ， 即 使 
他 们 拥有 某 个 Reader 账户 。 更 多 的 人 还 是 愿意 阅读 他 们 的 电子 邮件 )。 
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CC | Subscribeto "The Obvious Blog" 








， 
ED Option 1: Use an RSS reader 
If you already use one of the following RSS feed readers, 
In this site dclick it to auto-subscribe to this blog. If not, clicking the 
button will take you to a registration page- 
站 a 
MAN NaV En BB _netvibes Biogiine | EE OQ "eu rotor 
Main nay link 
Main nav in 夯 一 ce] Os 


Ev roo 


You can also simply copy the web address below and paste 
it into the Add Feed (or similar) field in your RSS reader. 


hapyfeed mydomain.com (Copy ， 


Option 2: Receive email notifications 


Enter your email address below and we'll send you an email 
whenever there is new content available on the blog- 


| eg. me@mydomain.com (Subscribe ) 





图 25-4 


进行 这 些 设计 时 ， 我 在 标题 上 还 加 上 了 Option 1〈 选 择 1) 和 Option 2 
(选择 2〉 的 字眼 。 这 样 用 户 就 能 通过 推理 很 快 地 认识 到 第 一 部 分 并 不 是 
他 们 唯一 的 选择 。 


然后 最 后 一 种 方式 是 通过 浏览 右 订 阅 并 浏览 RSS Feed。 我 添加 了 第 三 个 
部 分 ， 见 图 25-5。 


末尾 这 一 部 分 包括 了 一 段 指 示 性 文字 ， 说 明 如 何 使 用 主流 浏览 器 (IE、 
苹果 的 Safari， 以 及 Firefox) 来 订阅 RSS Feed。 


最 后 ， 为 了 进一步 让 该 技术 更 加 容易 学 习 ， 我 把 术语 RSS 全 部 都 换 成 了 


News Reader。 


清晰 的 标题 、 简 单 的 指示 说 明 ， 以 及 简便 、 快 速 的 解决 方案 已 经 迈 出 了 
一 大 步 ， 让 订阅 流程 变 得 更 易于 理解 ， 并 且 值 得 尝试 。 去 掉 RSS 缩写 只 
是 为 了 让 该 技术 更 易于 接受 所 做 的 最 后 一 点 尝试 。 


使 用 News Reader、 订 阅 电 子 邮 件 通 知 、 通 过 浏览 器 本 身 来 管理 Feed。 
用 户 现在 有 了 多 种 选择 来 订阅 内 容 ， 而 且 每 种 方式 都 无 需 付 出 过 多 努力 。 
而 把 讨厌 的 专业 词汇 吻 除 出 去 ， 即 使 是 那些 业界 之 外 的 人 也 能 很 容易 地 
理解 这 项 技术 。 
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| Subscribeto "The Obvious Blog" 


Csearch ) 5 
Option 1 Use a news reader 
If you already use one of the following news feed readers, 
In this site cick it to auto-subscribe to this blog. If not, clicking the 
button will take you to a registration page- 
Main nav link Sr 
Main nev In © nevipes | [+ Po) 
Main nav inx [+ Eom + L223 


You can also simply copy the web address below and paste 
it into the Add Feed (or similar) field in your news reader. 


‘httpifoed.mydomain.com ‘Copy ， 


Option 2: Receive email notifications 
Enter your email address below and we'll send you an email 
whenever there is new content available on the blog. 


[eg. me@mydomain.com ( Subscribe ) 


Option 3: Use your browser 

Most modern browsers offer a way to subscribe to content 
so it can be read in your browser instead of through a news 
reader. Following are instructions for how to do this in 
several browsers. 

Internet Explorer 7 (Windows only) 

[Instructions go here ...] 

Safari (Windows and Macintosh) 

[Instructions go here ..] 

Firefox (Windows and Macintosh) 


[Instructions go here ..] 





图 25-5 


一 个 新 想法 是 否 容 易 理 解 是 其 成 败 的 关键 。 诸 如 RSS 和 XML 这 种 词语 
会 妨碍 用 户 形成 稳固 的 直观 印象 ， 也 就 很 难 从 中 获 利 。 


除 掉 它 们 ， 事 情 就 会 让 人 很 容易 接受 。 
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在 我 开始 唆 唆 不 休 地 讲述 关于 Tag“〈 自 定义 标签 ) 的 问题 之 前 ， 你 们 应 该 
弄 明白 一 些 事情 。 


我 真 的 很 喜欢 Tag 这 个 想法 。 为 茶 个 单独 的 内 容 应 用 多 个 Tag， 意 味 着 它 
将 更 容易 查找 ， 而 且 这 种 组 织 方式 更 富 弹 性 ， 远 比 现代 操作 系统 所 用 的 
基于 文件 夹 模 式 的 组 织 方 式 要 好 得 多 。 


通过 Tag 模式 ， 你 可 以 为 a oe 
作 )、to-do〔 待 办 事宜 )、this_week (本 周 ) 或 者 projects (项 目 )。 2 
可 以 把 某 个 资料 文件 划 归 为 library( 图 书馆 )、research〔 研 究 文 档 )， 然 
后 再 为 它 加 上 具体 的 标题 ， 例 如 usability (可 用 性 ) 或 者 user_expeirence 
《用 户 体验 ) 等 。 


Tag 模式 的 这 种 弹性 意味 着 你 将 能 通过 无 数 种 方式 来 查找 和 组 织 内 容 。 你 
可 以 用 任何 自己 习惯 的 方式 快速 地 定义 它们 。 


爱 死 它 了 。 
但 是 Tag 本 身 并 不 是 一 个 完美 的 系统 。 如 果 你 为 社区 用 户 提供 了 Tag 模 
式 ， 有 时 候 事 情 会 变 得 很 糟糕 ， 因 为 这 里 面 有 许多 潜在 的 问题 。 


首先 ， 就 像 RSS 一 样 ，Tag 模式 也 是 一 个 全 新 的 想法 ， 但 并 没有 多 少 网 
站 能 让 它 不 言 自 明 ， 或 者 阐述 得 很 清楚 。 其 次 ， 地 球 上 没有 哪 种 语言 是 
ts 0 看 和 语法 所 带 来 的 不 熟悉 感 

会 在 使 用 时 带 来 混淆 。 第 三 ， 人 类 并 不 是 机 带 人 ， 因 此 同一 个 Tag 可 
人 而 最 后 一 点 ， 运 用 Tag 模式 的 网 站 中 所 用 
的 搜索 引擎 对 Tag 标签 的 支持 会 远大 于 对 自然 天 键 词 的 支持 。 
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比如 说 ， 我 在 Flickr.com 上 搜索 第 一 届 Voices That Matter 峰会 ?的 图 片 
时 ， 使 用 的 关键 词 是 Voices That Matter Web Design Conference (Voices 
That Matter 网 页 设计 峰会 )。 我 用 Google 搜索 时 就 用 的 这 几 个 关键 词 ， 
所 以 在 Flickr 里 面 我 同样 用 它们 来 搜索 ， 如 图 26-1 所 示 。 














| Everyone's Photos 了 ] Voices that matter web design conference 





© Fultext © Tags ony 





图 26-1 





但 是 Flickr 只 返回 了 4 个 搜索 结果 。 


我 把 关键 词 改 为 Voices That Matter， 得 到 了 700 多 张 图 片 ， 但 其 中 有 三 
分 之 一 都 和 该 峰会 毫 无 关系 。 


我 重新 在 关键 词 中 加 入 了 Conference 〈 峰 会 )， 这 次 只 得 到 了 58 个 结果 。 
这 肯定 出 了 问题 ， 因 为 我 知道 仅 该 会 议 协调 人 自己 就 上 传 了 至 少 200 张 
照片 。 


用 了 3 个 最 明显 的 搜索 关键 词 ， 却 几乎 什么 也 没 得 到 ， 于 是 我 决定 用 Tag 
标签 试 试 。 我 输入 了 VTMWDC， 也 就 是 Voices That Matter Web Design 
Conference( 峰 会 全 称 ) 的 缩写 ， 最 终 得 到 了 294 个 结果 ， 其 中 每 一 个 都 
来 自 于 那 次 会 议 。 还 真是 个 好 关键 词 ! 

当然 ， 我 无 法 知道 这 个 Tag 是 否 涵盖 了 那 次 活动 的 所 有 图 片 。 而 且 我 也 
不 太 明 白 自 己 在 一 开始 是 怎么 想到 用 这 个 会 议 的 缩写 来 作为 关键 词 的 。 

如 果 没 有 想到 用 缩写 字母 来 搜索 ， 我 可 能 就 会 被 困 住 。 但 Flickr 并 不 能 
期 望 每 个 人 都 能 自己 发 现 原来 用 Tag 搜索 才 会 更 有 效 。 而 且 如 果 是 要 查 
找 某 些 特殊 的 东西 ， 我 又 怎 能 知道 应 该 使 用 哪些 Tag 来 搜索 呢 ? 后 来 我 





















































GD Voices That Matter 面向 技术 、 设 计 和 商业 界 的 领袖 人 物 ， 为 他 们 展示 那些 “投身 于 
新 技术 、 新 方法 和 新 发 明 ” 并 “做 出 了 影响 业界 的 杰出 贡献 ”的 人 人。 网址 为 http:// 


www.voicesthatmatter.com/。 一 一 译 者 注 
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又 使 用 了 VTM 进行 搜索 ， 结 果 得 到 了 更 多 的 相关 图 片 。 


为 了 让 Tag 系统 变 得 真正 有 效 ， 还 需要 再 附加 一 些 功能 ， 让 创建 和 使 用 
Tag 标签 能 够 更 简单 、 更 轻松 。 


C26.1 分 类 系统 、 分 众 分 类 系统 以 及 变异 体 


有 两 种 不 同 的 方法 可 以 组 织 网 站 内 容 。 一 个 是 建立 分 类 系统 (Tax- 
onomy )， 也 就 是 说 一 旦 你 定义 好 类 别 ， 所 有 人 都 将 遵循 这 个 分 类 。 男 一 
个 是 分 众 分 类 系统 (Folksonomy 72 )， 它 算是 分 类 系统 的 一 种 协作 型 式 。 
通过 这 种 方法 ， 用 户 可 以 根据 自己 的 需要 持续 不 断 地 添加 和 改变 分 类 。 
如 果 你 决定 运用 分 众 分 类 系统 、 使 用 Tag 标签 ， 那 么 上 述 所 有 的 问题 就 
会 随 之 出 现 。 因 而 很 关键 的 一 点 就 是 如 何 让 Tag 模式 显得 更 为 友好 ， 同 
时 支持 用 户 的 思考 方式 。 

所 以 当 我 第 一 次 设计 自己 的 Tag 标签 系统 时 ， 考 虑 了 以 上 所 有 情况 ， 试 
图 寻求 一 种 能 改进 现 有 情况 的 解决 方案 。 

26.1.1 消除 语言 障碍 


为 了 让 初学 者 更 容易 理解 ， 我 尝试 去 掉 专 业 词 汇 Tag 〈 自 定义 标签 )， 而 
是 使 用 Label (标签 )， 就 像 Google 基于 网 页 的 电子 邮件 服务 Gmail 那 
样 ， 见 图 26-2。 
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26-2 

















GD Folksonomy 是 由 Folks (人 和 群 ) 和 Taxonomy (分 类 法 ) 合成 而 得 的 生 造 词 。 它 由 
社会 性 书签 服务 中 最 具 特 色 的 自 定义 标签 (Tag) 功能 衍生 而 来 ， 指 “群众 ”自发 
性 定义 的 平面 非 等 级 标签 分 类 。 有 人 称 之 为 “分 众 分 类 ” 也 有 解释 为 社会 分 类 
(Social Classification )。 一 一 译 者 注 
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“标签 ” 植 根 于 现实 世界 ， 因 此 大 多 数 人 都 很 容易 理解 。 我 们 无 时 无 刻 不 
在 使 用 标签 ， 有 的 人 在 中 餐馆 的 外 卖 盒 上 给 剩 菜 做 记号 ， 还 有 的 人 在 装 
满 杂 物 的 糖果 饶 上 贴 便签 纸 以 便于 日 后 翻 拣 。 


而 男 一 方面 ,“ 自 定义 标签 ”并 不 是 我 们 日 常生 活 中 经 常 接触 的 事物 。 它 
个 新 概念 ， 就 像 在 第 25 章 看 到 的 RSS 缩写 那样 ， 使 用 更 加 熟悉 的 词 
语 能 够 降低 对 新 事物 的 学 习 曲 线 。 


为 了 进一步 让 Tag 系统 更 加 友好 和 熟悉 ， 我 认为 在 创建 Tag 时 不 应 该 使 
用 或 者 显示 下 划 线 〈 例 如 ，my_house )。 


尽管 系统 记录 Tag 的 时 候 需要 保留 下 划 线 〈 因 为 Tag 将 被 用 于 动态 产生 
站 点 的 URL， 而 其 中 不 能 包含 空格 )， 它 们 也 不 需要 以 这 种 方式 展现 给 用 
户 。 总 之 ， 它 们 能 够 而 且 应 该 像 正 常 语言 那样 显示 。 


26.1.2” 阅 述 新 想法 
其 次 ， 我 需要 确保 Tag 模式 的 目的 和 用 法 都 表达 得 足够 清楚 ， 所 以 为 此 
我 提供 了 一 些 简单 的 说 明文 本 。 换 句 话 说， 我 尝试 不 要 去 假设 〔〈 如 第 7 
章 中 所 描述 的 ) 用 户 已 经 知道 Tag 是 什么 以 及 是 如 何 工作 的 ， 而 是 努力 
提供 一 些 简洁 明了 的 文本 来 解释 它 。 
我 用 了 一 种 简单 的 、 类 似 推荐 广告 的 形式 ; 

为 它 贴 上 标签 

添加 标签 ( 例如 my house ) 将 会 使 你 更 容易 地 找到 需要 的 图 


片 ， 并 且 随 意 添加 你 想 要 的 标签 。 我 们 将 会 把 标签 转换 成 链接 ， 
你 只 需 单 击 某 个 链接 就 能 看 到 所 有 使 用 该 标签 的 图 片 。 


26.1.3 ”提出 建议 


不 同 的 人 可 能 (而 且 儿 乎 总 是 〉 会 不 知 不 觉 地 为 同一 个 Tag 创建 多 个 版 
本 。 所 以 我 们 需要 某 种 方法 来 侦 测 那些 相似 的 Tag， 并 且 让 用 户 能 够 为 想 
标记 的 内 容 选 择 那 些 已 有 的 Tag。 

例如 ， 某 个 人 在 一 个 照片 共享 网 站 上 传 了 一 些 万 圣 节 派对 的 照片 ， 他 可 


能 会 把 每 张 图 片 都 标记 为 halloween (万 圣 节 )。 而 参加 该 派对 的 男 一 个 
女孩 则 可 能 会 把 她 上 传 的 照片 标记 为 Halloween_party 万圣节 派对 )。 两 
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个 Tag 都 很 恰当 ， 但 是 现在 针对 同一 件 事 却 有 多 个 不 同 的 Tag， 因 此 参加 
那 次 聚会 的 其 他 人 可 能 无 法 在 一 次 搜索 中 找到 所 有 的 图 片 。 


(顺便 提 一 句 ， 为 了 解决 这 一 问题 ，Yahoo! 曾经 在 2006 年 的 South by 
Southwest 交互 年 会 上 推行 过 一 种 较 缺 少 技术 含量 的 预防 措施 。 在 那 次 
Yahoo! 的 官方 宴会 上 ， 刘 厅 中 张贴 着 一 些 广告 标语 ， 指 示 宾 客 将 本 次 所 
有 的 Flickr 照片 都 标记 为 Yahoo!_bar_tab， 这 样 所 有 的 参加 者 都 能 够 找 
到 它们 。 这 项 举措 目前 还 没有 席卷 全 国 ， 但 是 想 想 在 每 一 个 宴会 、 派 对 、 
会 议 或 者 其 他 活动 上 都 要 告诉 大 家 应 该 用 什么 Tag 来 记录 活动 ， 这 也 很 


有 意思 。) 
我 做 了 一 些 不 同 的 事 来 解决 这 个 问题 。 


首先 ， 我 认为 网 站 应 该 像 Google Suggest 那样 提供 “自动 完成 ”功能 。 
用 户 输入 某 个 Tag 时 ， 系 统 会 搜索 出 近似 的 Tag， 然 后 把 这 些 Tag 以 列表 
形式 呈现 ， 让 用 户 选 择 其 中 最 适 配 的 一 个 。 


当然 ， 这 个 办 法 潜在 的 不 足 之 处 ， 如 同 第 9 草 所 描述 的 ， 就 是 用 户 有 可 
能 会 选择 一 个 推荐 的 Tag， 但 其 实 他 自己 想 输 入 的 Tag 更 合适 。 


第 二 种 方案 是 在 用 户 输入 了 自己 的 Tag 之 后 显示 一 个 推荐 页 面 。 用 户 输 
入 Tag 之 后 ， 系 统 搜 索 出 近似 的 Tag， 然 后 在 下 一 个 页 面 中 陈列 出 来 。 这 
个 页 面 可 以 用 文字 向 用 户 解释 他 可 以 把 自己 的 新 Tag 和 那些 已 被 其 他 人 
创建 出 来 的 Tag 相 匹 配 。 


通过 这 种 方式 ， 为 相同 Tag 创建 多 个 版 本 的 几率 将 会 降低 ， 同 时 查找 相 
关内 容 也 会 更 容易 。 


26.1.4” 搜索， 搜索 ， 再 搜索 


最 后 ， 网 站 的 搜索 功能 必须 为 自然 关键 字 提供 有 效 的 搜索 结果 ， 而 不 能 
只 针对 Tag〔 就 像 Flickr 那样 )。 


我 知道 从 开发 角度 来 说 这 一 点 也 许 不 太 容 易 做 到 。 但 是 搜索 是 大 多 数 网 
站 最 重要 的 一 个 功能 ， 而 且 它 运转 是 否 良好 ， 这 一 点 至 关 重 要 。 如 果 用 
户 不 能 用 Google 能 接受 的 自然 语言 找到 他 们 想 要 的 内 容 ， 在 网 站 里 费力 
寻找 信息 将 会 很 痛苦 。 
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26.1.5 ” 自 定义 标签 的 未 来 

再 次 重申 ， 新 生 想 法 应 该 易于 学 习 。 剔 除 专业 词汇 能 够 改善 大 部 分 使 用 
Tag 系统 的 网 站 ， 但 很 明显 ， 问 题 不 仅仅 出 在 术语 上 面 。 

Tag 并 不 是 大 多 数 人 都 熟悉 的 东西 ， 因 此 必须 采取 措施 帮助 用 户 对 系统 如 
何 工作 形成 清晰 的 理解 ， 让 他 们 无 需 付 出 多 少 努 力 就 能 搜索 到 想 要 的 内 
容 ， 同 时 用 其 他 用 户 都 能 轻易 找到 的 方式 组 织 页 面 内 容 。 
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通过 拖 放 来 组 织 信息 








那些 帮助 你 管理 信息 的 产品 最 大 的 一 个 卖点 就 是 组 织 信息 的 能 力 。 使 用 
Dashboard HQ， 用 户 能 够 创建 链接 列表 和 个 人 注释 ， 并 且 能 完全 地 控制 
页 面 内 容 。 而 由 于 页 面 内 容 百 分 之 百 都 是 由 用 户 决 定 的 ， 因 此 他 们 是 否 
能 随 自己 的 需要 来 组 织 信息 非常 重要 。 
为 了 达到 这 一 目标 ， 我 们 在 产品 中 提供 了 创建 和 删除 模块 、 记 录 注 释 以 
及 书签 等 功能 。 同 时 我 们 还 提供 了 通过 拖 放 (drag-and-drop〉 操作 来 重新 
排列 模块 这 一 功能 ， 它 能 够 使 用 户 建立 最 适合 自己 的 顺序 ， 从 而 在 下 次 
访问 页 面 时 能 更 容易 地 找到 自己 想 要 的 东西 。 


然而 ,为 了 让 拖 放 操作 顺利 进行 ， 这 个 过 程 同 样 需要 做 到 清晰 和 简练 。 
C27.1 交互 的 三 种 状态 

一 个 有 效 的 拖 放 交 互 需要 提供 完整 的 3 种 状态 。 

你 问 这 3 种 状态 是 什么 ? 

27.1.1 “邀请 ” 


首先 是 “邀请 ”状态 。 此 状态 包含 页 面 上 任何 邀请 你 采取 行动 的 元 素 。 
它 可 以 是 触发 某 个 行为 〈 而 不 是 载 和 人 某 个 新 页 面 ) 的 按钮 或 者 是 命令 链 
接 ， 或 者 可 以 是 当 鼠 标 悬 停 到 某 个 图 标 上 出 现 的 工具 提示 ， 甚 至 可 以 是 
一 个 改变 了 的 鼠标 指针 ， 提 示 用 户 除 了 单 击 之 外 还 可 以 进行 其 他 操作 。 


一 旦 用 户 在 Dashboard HQ 的 页 面 上 单 击 了 Edit This Page (编辑 本 页 面 ) 
的 链接 ， 就 会 进入 编辑 模式 。 他 将 会 看 到 “邀请 ”状态 提供 了 几 项 任务 可 
以 选择 ， 这 几乎 也 是 所 有 交互 行为 的 默认 状态 。 其 中 一 个 选项 是 删除 某 个 
模块 ， 另 一 个 是 为 模块 重 命名 ， 而 最 后 一 个 是 通过 拖 放 重新 排列 模块 。 
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这 里 的 “邀请 ”就 是 显示 在 每 个 模块 左上 角 的 文字 drag( 拖 忠 )。 如 图 
27-1 所 示 。 




















drag 而 drag 而 
To do today Edit Company resources Edit 
1) Call Steve Intranet 
2) File the registry forms 401k 
3) Follow up with Dave about Bonaiits 
yesterday's meeting _ 
4) Book the conference room for Comorate site 
Tuesday's meeting Marketing dept. phone list 
5) Meet Jay for lunch Google 
6) Buy plane ticket for Austin trip 
7) Buy dog food 
drag 而 
drag 而 Googe | Edit 
Dictionary Edit 四 
Google News 
Google Maps/Local 
Google Book Search 














图 27-1 


很 简单 ， 不 是 吗 ? 出 现 它 就 表示 邀请 用 户 采取 行动 。 


为 了 让 “邀请 ”更 加 完善 ， 我 们 设 定 当 用 户 鼠 标 移 动 到 文字 drag 上 时 ， 
将 显示 代表 “移动 ”的 指针 ， 这 进一步 传达 给 用 户 这 里 能 够 支持 更 多 的 
行为 。 

27.1.2 “操作 ” 

第 二 个 是 “操作 ”状态 ， 包 含 用 户 要 完成 一 项 任务 所 必须 采取 的 所 有 行 
动 。 它 可 以 只 是 一 步 操作 ， 例 如 单 击 某 个 链接 载 人 新 页 面 ， 也 可 能 需 
要 多 个 步骤 ,例如 复制 某 个 RSS Feed 的 URL 并 粘贴 到 你 喜欢 的 News 
Reader 里 面 ， 然 后 保存 这 个 URL 来 订阅 该 Feed。 

Dashboard HQ 的 “操作 ”状态 包括 单 击 drag 操作 柄 ， 拖 电 模 块 到 新 的 位 
置 ， 然 后 释放 鼠标 按钮 〈 或 者 提起 触感 笔 ) 让 模块 “ 落 ” 到 这 个 新 位 置 
上 上。 
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每 一 个 步骤 都 必须 尽 可 能 清楚 ， 证 用 户 能 很 容易 地 学 习 并 且 理 解 这 种 交 
互 行为 。 

稍稍 离 题 一 下 ， 不 论 其 面向 范围 和 目的 ， 上 述 内 容 对 于 任何 交互 都 至 关 
重要 。 所 有 的 交互 行为 都 必须 尽 可 能 地 清晰 。 


提 到 这 一 点 是 因为 ， 很 多 读 过 Designing the Obvious 的 人 都 建议 ， 我 应 该 
把 书 里 面 的 想法 应 用 到 更 大 型 、 企 业 级 的 应 用 软件 里 面 去 。 


我 的 回答 永远 都 是 一 样 的 。 设 计 一 款 大 型 的 软件 当然 意味 着 你 需要 做 更 
多 ， 而 且 需 要 考虑 更 多 ， 但 是 它 并 没有 改变 通用 的 规则 。 


大 型 软件 仍然 需要 提供 最 相关 和 最 基本 的 功能 ， 通 过 启发 式 的 设计 让 用 
户 提高 使 用 效率 ， 并 且 保持 从 一 个 界面 到 下 一 个 界面 的 一 致 性 和 连贯 性 ， 
同时 通过 设计 元 素 让 交互 变 得 更 易学 习 ， 并 且 能 重复 同 种 交互 行为 。 而 
每 一 个 交互 行为 的 每 一 个 步骤 都 需要 尽 可 能 地 简单 和 清楚 ， 特 别 是 在 
“操作 ”状态 中 。 


不 是 简单 ， 也 不 是 清楚 ， 而 是 简单 又 清楚 (有 时 候 这 意味 着 需要 更 多 简 
单 的 步骤 ， 如 第 16 章 所 讨论 的 ， 而 有 时 候 又 意味 着 需要 执行 更 多 的 任 
务 ， 每 个 任务 中 包括 很 少 的 步骤)。 如 果 有 什么 区 别 的 话 ， 只 能 说 相 较 
于 我 经 常 谈 到 的 小 型 Web 应 用 而 言 ， 在 大 型 软件 中 这 些 显得 更 加 重要 而 
已 。 更 大 型 并 不 意味 着 更 加 复 休 。 更 大 型 只 意味 着 ， 喇 ， 它 更 大 而 已 。 


现在 让 我 们 回 到 主题 。 


不 管 这 位 用 户 是 第 一 次 操作 还 是 第 400 次 操作 ， 拖 放 交 互 中 的 每 一 个 步 
又 都 需要 表现 其 自身 意义 。 

因此 ， 只 要 用 户 把 鼠标 移动 到 drag 操作 柄 上 ， 单 击 ， 然 后 开始 拖 息 模块 ， 
我 们 就 需要 确切 地 传达 出 因为 位 置 的 改变 而 对 页 面 产生 的 影响 。 

为 了 做 到 这 一 点 ， 我 们 创建 了 一 个 虚线 框 来 显示 模块 将 会 “ 落 ” 到 的 新 
位 置 ， 同 时 也 移动 了 其 他 模块 的 位 置 ， 以 此 确切 地 表现 出 每 一 个 元 素 因 
此 将 会 受到 的 影响 。 如 图 27-2 所 示 。 
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图 27-2 


在 这 里 ,，“ 操 作 ” 状 态 所 需要 做 的 只 是 拖 跨 某 个 模块 到 新 的 位 置 ， 但 在 操 
作 的 同时 ， 界 面 也 根据 需要 进行 更 新 ， 以 确切 地 显示 出 操作 将 对 页 面 产 
生 的 影响 。 


27.1.3 “实现 ” 


第 三 个 是 “实现 ”状态 。 几 乎 每 个 人 都 曾经 把 它 忘记 过 。 相 信 我 ， 我 自 
己 就 干 过 这 事 。 但 也 许 是 因为 “做 事 就 要 有 始 有 终 ” 的 想法 作怪 ， 每 当 
忘记 它 时 ， 当 天 晚上 肯定 会 在 床上 加 转 反 侧 ， 苦 苗 思 索 为 什么 自己 的 
设计 无 法 令 人 满意 ， 所 以 这 对 我 来 说 是 个 教训 。 现 在 我 已 经 学 会 牢 牢 记 
住 它 了 ， 不 然 等 着 我 的 肯定 又 是 一 个 不 眠 之 夜 。 


“实现 ”状态 就 是 让 用 户 知道 他 的 交互 已 经 实现 了 。 这 听 起 来 似乎 非常 简 
单 ， 但 是 别 忘 了 ， 令 人 不 满 的 交互 行为 会 让 人 对 设计 者 产生 不 满 。 

“实现 ”有 了 时候 内需 显 示 1 行文 字 ， 告 诉 用 户 他 的 个 人 资料 信息 已 经 保 
存 。 有 时 候 则 意味 着 当 用 户 在 “联系 我 们 ”表单 中 发 送 电 子 邮 件 时 向 他 
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们 表示 感谢 。 还 有 的 时 候 它 表示 在 某 人 从 你 的 购物 网 站 上 成 功 订购 后 发 
送 的 一 封 确认 邮件 ， 以 及 发 货 状 态 的 更 新 。 


不 过 ， 有 时 候 对 “实现 ”的 指示 也 不 需要 太 明 确 。 在 大 多 数 拖 放 交互 的 
例子 中 ， 当 被 拖 忠 的 模块 和 其 他 模块 被 “ 吸 ” 到 各 自 新 的 位 置 时 ， 就 已 
经 充分 地 表明 “实现 ”了 ， 如 图 27-3 所 示 。 

















Company resources Edit Google Edit 








Intranet 

401k 

Benefits Google News 
Corporate site Google Maps/Local 
Marketing dept. phone list Google Book Search 
Google 


To do today Edit 






1) Call Steve 
2) File the registry forms 

3) Follow up with Dave about 
yesterday's meeting 

4) Book the conference room for 
Tuesday's meeting 

5) Meet Jay for lunch 

6) Buy plane ticket for Austin trip 
7) Buy dog food 
















图 27-3 


这 就 是 Dashboard HQ 的 做 法 。 别 的 什么 都 不 需要 ， 而 且 多 了 反而 会 让 交 
互 行为 更 加 复杂 。 

人 们 那 种 最 普通 的 、 几 乎 是 天 生 的 对 于 在 桌 上 排 布 纸张 或 者 拼图 所 产生 
的 直观 印象 ， 这 对 于 拖 放 操作 来 说 就 已 经 足够 了 。 更 别 说 他 们 使 用 计算 
机 时 ， 几 乎 每 天 都 要 用 鼠标 来 回 拖 放 文件 了 。 

27.1.4 ”完成 的 感觉 


不 论 是 复杂 还 是 简单 的 交互 ， 我 们 都 需要 呈现 这 3 种 状态 ， 才 能 让 用 户 
理解 如 何 开始 、 如 何 完成 ， 然 后 相信 自己 操作 无 误 。 
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我 们 很 容易 就 会 忘记 “实现 ”状态 ， 例 如 在 某 个 五 星 评级 系统 中 你 点 击 
了 某 颗 星 ， 然 后 什么 也 没有 发 生 《〈“ 如 第 24 章 所 讨论 的 )。 但 如 果 没 有 它 ， 
用 户 可 能 就 会 对 自己 的 操作 不 太 确 信 ， 也 就 没有 信心 继续 其 他 操作 。 


不 管 是 简单 还 是 大 型 的 应 用 程序 ， 请 确保 每 一 个 步骤 都 清晰 ， 并 且 给 出 
适当 的 反馈 。 这 样 所 有 的 交互 行为 都 将 会 更 有 效率 。 


27.1.5 ”判断 你 的 功能 是 否 正 当 


拖 放 操 作 可 以 适用 于 各 种 地 方 。 在 iGoogle "和 My Yahoo!2 上， 用 户 可 以 
在 自己 的 个 性 化 主页 上 重新 排列 各 种 模块 。 而 在 Ning.com2 上， 用 户 可 
以 把 自己 想 要 的 元 素 图 标 拖 忠 到 自己 主页 的 缩 略 图 里 面 ， 并 随意 安排 它 
们 的 位 置 。 


但 是 ， 尽 管 设计 得 非常 好 ， 拖 放 操 作 和 个 性 化 主页 这 些 功能 仍然 需要 视 
环境 而 定 。 当 包含 它们 的 这 个 页 面 是 用 户 的 “目的 地 ”时 ， 它 们 看 上 去 
会 很 不 错 ; 但 如 果 用 户 只 是 “路 过 ”这 个 页 面 ， 则 没有 什么 必要 。 


不 同 的 应 用 扮演 着 不 同 的 角色 。 例 如 某 个 项 目 管理 系统 ， 可 能 一 连 几 天 
都 会 在 浏览 需 里 保持 打开 的 状态 ， 持 续 不 断 地 被 核查 、 更 新 和 回顾 。 它 
就 是 “目的 地 ”。 你 将 会 在 其 中 花 很 长 时 间 ， 因 此 它 可 能 需要 某 种 合适 的 
个 性 化 定制 。 


而 “路 过 ” 则 是 指 你 在 通 向 更 重要 事物 中 才 会 使 用 它 ， 可 能 还 只 是 偶尔 
使 用 。 


政府 门户 网 站 是 个 很 好 的 例子 。 你 登录 政府 门户 网 站 是 为 了 寻找 一 些 确 
实 需 要 的 信息 ， 例 如 如 何在 线 延 长 驾照 的 注册 期 。 像 这 样 的 一 个 页 面 不 
需要 个 性 化 功能 ， 而 且 绝 大 多 数 情 况 下 ， 这 种 功能 都 将 被 无 情 地 浪费 ， 
甚至 会 让 寻找 信息 变 得 更 加 困难 。 


































































































GD Google 为 用 户 提 供 的 个 性 化 主页 。 用 户 可 以 在 主页 上 添加 各 种 个 性 化 工具 ， 例 如 
天 气 、Gmail、 日 历 、 财 经 要 闻 等 ， 同 时 可 以 自由 排列 各 工具 模块 的 位 置 。 网 址 为 
http://www.google.com/ig。 一 一 译 者 注 

@ Yahoo! 为 用 户 提 供 的 个 性 化 主页 ， 功 能 类 似 iGoogle。 网 址 为 http://my.yahoo.com/。 

译 者 注 

@@ Ning.com 是 一 个 社区 交互 性 网 站 ， 个 性 化 主页 的 功能 类 似 iGoogle 和 My Yahoo!。 
本 书 作者 在 Ning.com 上 的 主页 地 址 为 http://designingtheobvious.ning.com/。 

一 一 译 者 注 
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进入 这 样 的 页 面 时 ， 我 们 很 快 地 扫描 ， 找 到 第 一 个 看 上 去 合理 的 链接 ， 
然后 尽快 离开 这 里 。 这 不 是 那 种 我 们 耗费 宝贵 时 间 来 根据 特殊 需求 进行 
定制 的 页 面 。 


但 可 笑 的 是 ， 我 经 常 看 见 这 种 “途径 ”页 面 变 成 了 极 富 功能 性 的 个 性 化 
主页 ， 仅 仅 是 因为 所 有 者 中 的 某 个 人 认为 既然 它 适 合 iGoogle， 那 么 也 将 


会 适合 他 们 。 


设想 一 下 你 的 政府 网 站 变 成 了 3 列 ， 其 中 满 是 可 以 拖 忠 的 模块 ， 你 可 以 
查询 天 气 、 得 到 最 新 的 股票 行情 ， 甚 至 还 能 玩 纸牌 游戏 (这些 都 是 你 在 
iGoogle 上 能 做 的 事情 )。 


那 会 很 奇怪 ， 不 是 吗 ? 这 些 不 是 人 们 在 政府 网 站 上 寻找 的 东西 ， 而 且 政 
府 也 根本 不 会 因为 提供 了 这 种 功能 而 获得 任何 好 处 。 这 种 网 站 应 该 把 注 
意 力 放 在 那些 人 们 在 这 里 真正 想 找 的 政府 服务 信息 上 面 。 


男 一 方面 ， 诸 如 iGoogle、My Yahoo! 和 Dashboard HQ 这 种 服务 ， 它 们 
是 由 用 户 设 计 的 ， 而 不 是 为 用 户 设计 的 。 这 些 页 面 里 的 内 容 完全 由 用 户 
决定 ， 就 好 像 他 们 在 设计 自己 的 门户 网 站 自己 的 “途径 ”页 面 一 样 。 
因此 ， 这 些 看 上 去 是 “途径 ”的 应 用 ， 变 成 了 “目的 ”应 用 。 


不 知道 你 会 怎么 样 ， 反 正 我 不 会 把 时 间 都 花 在 政府 网 站 上 ， 不 管 它 有 多 
酷 。 也 许 那些 政府 职员 会 把 它 当 作 自 己 的 个 人 主页 ， 甚 至 认为 个 性 化 功 
能 非常 有 用 ， 但 这 些 人 对 于 网 站 的 整个 受众 群体 来 说 ， 只 占 非 常 小 的 一 
部 分 。 网 站 不 应 该 为 这 些 人 而 设计 ， 而 应 该 为 受众 中 人 数 最 多 的 群体 设 
Hs 

而 当 这 种 功能 确实 有 意义 时 〔( 就 像 Dashboard HQ 那样 )， 交 互 是 否 流 畅 
而 愉快 就 显得 至 关 重 要 了 。 确 保 交 互 行为 的 3 种 状态 都 清晰 、 明 显 ， 将 
会 让 用 户 更 加 自信 。 
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假设 你 们 公司 正 准 备 为 旗下 最 受 欢迎 的 Web 应 用 进行 一 次 重要 更 新 ， 同 
时 假设 所 有 的 设计 和 开发 工作 都 已 经 完成 ， 该 应 用 现在 只 等 竺 用户 的 检 
测 ， 而 且 你 计划 在 本 周 内 就 按 下 开关 发 布 这 个 新 版 本 。 
然后 ， 假 设 你 在 这 个 紧要 关头 给 我 打 电话 ， 描 述 了 你 们 的 计划 ， 并 且 硕 
望 我 为 新 的 设计 做 一 次 可 用 性 审查 。 
想 知 道 我 会 说 什么 吗 ? 
首先 ， 我 会 说 下 次 你 应 该 更 早 通知 我 ， 但 那 是 另外 一 回 事 。 
其 次 ， 我 会 问 你 是 否 能 给 自己 所 有 的 用 户 发 送 一 封 电子 邮件 ， 并 且 在 首 
页 上 做 一 点 小 改动 ， 然 后 创建 一 个 页 面 专门 说 明 即 将 做 出 的 更 新 。 然 后 
我 会 问 你 是 否 可 以 在 明 晚 之 前 搞定 这 些 。 
没 错 ， 我 是 个 奇 刻 的 工头 。 
事实 上 ， 我 见 过 太 多 的 Web 应 用 直接 就 这 样 跨 过 门槛 ， 对 那些 最 拥戴 它 
们 的 用 户 却 连 一 名 警告 也 不 提 。 而 这 些 用 户 正 是 那些 之 夹 地 买单 而 且 为 
它们 在 朋友 中 做 宣传 的 人 。 如 果 连 这 些 用 户 都 不 知道 即将 的 改变 ， 更 别 
说 那些 仍旧 在 学 习 并 且 为 你 的 产品 是 否 值 得 使 用 而 犹豫 的 新 手 了 。 
其 实 ， 告 诉 顾 客 你 们 正在 做 一 些 可 能 会 影响 他 们 的 事 ， 会 带 来 很 多 显著 
的 优势 。 以 下 是 这 么 做 的 几 个 主要 原因 。 

国 它 会 给 你 最 忠诚 的 顾客 带 来 一 些 值得 激动 和 期 待 的 事情 。 

国 它 会 给 你 最 保守 、 最 讨厌 改变 的 用 户 足 够 的 警告 ， 这 样 他 们 就 能 

提前 对 新 功能 的 冲击 做 好 充分 准备 。 
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国 它 会 在 你 的 更 新 发 布 之 前 为 人 们 创造 谈资 ， 这 样 你 的 新 版 本 将 会 
迎 来 巨大 的 访问 量 ， 而 且 口 耳 相 传 将 会 为 你 带 来 一 些 新 用 户 。 

国 有 了 它 ， 用 户 就 不 会 在 某 天 登录 后 突然 发 现 所 有 元 素 的 位 置 都 被 
移动 ， 或 者 常用 任务 流程 发 生 了 改变 。 它 会 让 用 户 知 道 自己 即将 
需要 一 些 再 适应 ， 而 且 会 很 值得 。 


悲哀 的 是 ， 很 多 公司 从 来 都 不 愿意 付出 哪怕 一 丁点 努力 来 收获 这 些 利 益 。 
我 一 直 试 图 让 我 为 之 工作 或 合作 的 公司 进行 一 些 此 类 的 尝试 ,但 是 由 于 
各 种 原因 ， 它 们 总 是 玻 包 了 这 一 点 。 


有 时 候 是 因为 开发 团队 即将 面临 项 目的 最 终 期 限 ， 只 是 时 间 不 够 的 缘故 。 
有 时 候 则 是 因为 市 场 团 队 不 敢 事 先 泄露 秘密 ， 害 怕 在 正式 发 布 前 被 某 人 
虽 禄 了 整个 点 子 〈 这 种 观点 很 糟糕 ， 因 为 竞争 是 一 件 好 事 ， 而 且 “ 争 谁 
更 优秀 ” 远 比 “ 争 谁 更 快 进入 市 场 ”要 好 得 多 )。 还 有 些 时 候 仅仅 是 因为 
领导 层 并 不 认为 这 事 很 重要 。 

你 知道 ， 因 为 良好 的 客户 服务 和 稳固 的 营销 业绩 并 不 很 重要 。 

荡 雇 。 

我 们 的 顾客 和 我 们 自己 一 样 ， 生 活 中 有 大 堆 的 事情 需要 担心 。 我 们 的 
工作 不 是 某 天 突然 用 一 个 新 界面 去 惊吓 他 们 ， 然 后 期 待 他 们 能 自己 弄 
懂 并 成 为 专家 。 我 们 的 工作 是 让 他 们 的 生活 更 加 轻松 。 如 果 我 们 事先 
给 顾客 警告 ， 他 们 就 能 更 有 效 地 管理 信息 ， 而 不 是 在 某 个 星期 二 早晨 
被 吓 一 跳 。 


C28.1 为 改变 而 设计 
那么 你 如 何 为 改变 而 设计 呢 ? 


要 回答 这 个 问题 ， 我 们 需要 逐步 脱离 一 般 情 况 下 对 界面 的 认 知 ， 而 是 去 
看 一 看 和 用 户 交 流 的 其 他 方式 。 在 复 选 框 和 滑动 条 控件 领域 之 外 ， 我 们 
使 用 各 种 通常 情况 下 和 用 户 体 验 并 无 直接 联系 的 事物 ， 例 如 电子 邮件 、 
博客 、Newsletter、Screencast， 还 有 屏幕 截图 。 
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所 有 这 些 都 是 我 们 和 顾客 保持 联系 的 绝 佳 工具 。 
为 改变 而 设计 的 第 一 步 就 是 评 佑 如 何 发 布 更 新 。 


我 们 是 否 将 在 某 个 明确 的 时 间 发 布 更 新 ? 如 果 不 是 ， 能 和 否 设 定 一 个 ? 更 
新 会 影响 你 所 有 的 顾客 吗 ? 还 是 只 有 其 中 一 部 分 ? 在 更 新 和 那些 愿意 买 
单 的 用 户 直 接见 面 之 前 ， 进 行 一 些小 的 测试 是 否 会 更 有 好 处 ? 


为 发 布 更 新 设 定 明确 的 时 间 意 味 着 你 能 给 顾客 准确 的 信息 ， 而 不 是 在 某 
天 早上 突然 吓 他 们 一 跳 。 在 更 新 发 布 给 每 一 个 用 户 之 前 ， 先 在 一 小 部 分 
人 中 试用 ， 这 将 会 让 你 有 时 间 修 正 “ 最 后 关头 ”的 小 Bug。 把 新 功能 
告诉 那些 比 其 他 人 更 喜欢 发 现 隐 藏 宝藏 的 “积极 用 户 ” 能 够 获得 你 最 好 
也 最 忠诚 的 顾客 的 感激 ， 而 且 让 他 们 感觉 自己 受到 了 特殊 待遇 。 


一 旦 你 决定 了 如 何 发 布 ， 那 么 就 是 时 候 通 知 他 们 了 。 


从 一 封 简单 的 电子 邮件 开始 ， 把 它 发 送 给 每 一 个 注册 过 的 人 。 那 些 积极 
用 户 会 很 感 兴趣 然后 告诉 自己 所 有 的 朋友 。 普 通用 户 可 能 也 是 你 最 大 的 
用 户 群 体 ， 则 会 获得 足够 的 预警 ， 知 道 有 些 事情 马上 要 发 生 改 变 了 。 那 
些 曾 注册 过 而 又 废弃 了 ， 但 又 没有 删除 账号 的 用 户 ， 有 时 候 我 们 称 之 为 
“沉睡 者 ” 则 会 被 提醒 而 再 一 次 光临 你 的 网 站 。 


而 这 只 是 一 封 简单 的 电子 邮件 。 就 像 这 样 : 
John: 

































































我 们 将 于 10 月 3 日 为 AcmeWidgets.com 做 一 次 重要 的 更 新 。 
现在 ， 你 可 以 做 下 面 这 些 事 。 

口 和 其 他 人 一 起 分 享 你 上 传 的 图 片 。 

口 为 你 看 到 的 图 片 发 表 评 论 。 

口 如 果 想 深入 了 解 某 些 图 片 ， 你 还 可 以 和 它们 的 主人 联系 并 交 


流 。 


如 果 想 了 解 具 体 情 况 ， 欢 迎 随时 过 来 逛 逛 : www.acmewidgets. 
com/ update/tour。 
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这 些 变动 都 是 自动 的 ， 你 无 需 做 任何 事情 。10 月 3 日 ， 和 往常 
一 样 登录 就 能 开始 享受 乐趣 。 


我 们 感谢 你 到 现在 所 做 的 一 切 ， 而 且 很 期 待 你 在 新 AcmeWidg- 
ets 上 的 作为 ! 


你 真诚 的 ， 
AcmeWidgets 开发 团队 


站 


通告 区 


下 一 步 ， 在 网 站 首页 上 添加 一 些 关 于 更 新 的 预告 信息 。 简 单 又 不 但 事 ， 
但 是 仍然 能 够 引起 注意 。 


以 下 是 我 用 过 几 次 的 小 伎俩 ， 用 于 各 种 类 型 的 通告 。 我 称 之 为 ， 通 告 区 。 
《我 是 个 天 才 ， 不 是 吗 ? ) 


或 许 你 可 以 在 我 的 个 人 网 站 http://rhjr.net 上 找到 它 ， 如 图 28-1 所 示 。 











robert hoekman, jr. designing the obvious (new riders) 

i Designing the Obvious explains the qualities of great 

a) applications and how to successfully reproduce them. 
Read the book ... 








图 28-1 


基本 上 ， 它 是 一 个 沿 着 页 面 项 部 的 黑色 横 条 ， 里 面包 含 着 某 个 通知 ， 并 
且 通 常会 链接 到 另 一 个 信息 更 详细 的 页 面 。 


它 简单 、 清 晰 ， 而 且 有 效 ， 而 这 正 是 我 们 想 要 的 结果 。 


使 用 什么 颜色 完全 取决 于 你 自己 ， 只 要 确保 它 能 和 页 面 上 其 他 颜色 区 分 
开 来 ， 因 为 这 样 才能 引起 注意 。 
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C28.2 界面 元 素 的 再 利用 资源 


Designing the Obvious 一 书 中 ， 我 谈 到 “欢迎 ”界面 能 帮助 用 户 快速 熟悉 
某 个 产品 。 同 时 我 也 提 到 在 初级 用 户 变 成 中 级 用 户 、 不 再 需要 提速 协助 
之 后 ， 这 些 元 素 仍 然 可 以 在 新 功能 或 类 似 情况 中 再 利用 。 

图 28-2 是 我 曾 用 过 的 例子 。 不 ， 它 没有 说 “欢迎 ” 它 的 目的 是 为 用 户 
介绍 页 面 ， 只 是 处 于 绝 大 多 数 情 况 下 “欢迎 ”文本 所 处 的 位 置 而 已 。 而 
内 容 要 么 是 说 明 性 文字 ， 要 么 是 营销 广告 语 。 


My Account! 


In the My Account screen, you can: 
e Change your password 
e Edit your billing information 
e Change your Email address 


Note: This information may take up to 24 hours to update in our system. 





LL Dont show this window anymore 





图 28-2 


而 以 下 则 是 如 何 再 次 利用 它 让 用 户 了 解 即将 到 来 的 变动 ， 如 图 28-3 所 
示 。 





New features! x] 


‘We've added a few things to AcmePhotos to make your experience even better. 
Now you can: 


e Senda frienda link to a gallery by email 
e Order prints in 3 easy clicks 
e Upgrade your subscription plan to get free prints 


Learn more about these new features and get started today! 





|] Dont show this window anymore 








图 28-3 
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很 简单 ， 对 吧 ? 用 户 已 经 熟悉 了 这 个 界面 ， 因 为 他 们 在 最 开始 访问 的 时 
候 就 见 过 它 。 而 再 次 让 它 弹 出 来 将 会 非常 引 人 注 意 ， 而 且 向 用 户 传达 出 
它 可 能 包含 了 重要 信息 。 


你 还 需要 创建 一 个 页 面 ， 包 含 关 于 网 站 更 新 所 有 的 细节 ， 然 后 将 该 页 面 
和 这 个 界面 或 者 通告 区 进行 链接 。 


为 改变 而 设计 的 好 处 远 远 超过 了 实现 它 所 付出 的 时 间 和 精力 。 这 些 措施 
都 很 简单 ， 但 它们 都 会 深刻 地 影响 到 在 更 新 发 布 当 天 你 的 网 站 是 否 能 获 
得 认可 。 

不 管 发 生 什么 ， 不 要 在 某 个 星期 二 早晨 拿 一 次 天 翻 地 莉 的 变动 去 惊吓 你 
的 顾客 。 让 他 们 了 解 将 要 发 生 什 么 ， 这 样 他 们 才能 为 变动 做 好 准备 ， 为 
之 兴奋 ， 而 且 开始 再 一 次 地 谈论 你 的 产品 。 
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现实 生活 中 说 再 见 总 是 很 悲伤 ， 但 当 你 面 对 某 个 Web 应 用 时 则 不 会 
容易 就 能 单 击 那个 魔力 非凡 的 Log Out 链接 〈 或 者 Logout， 例 如 在 第 3 
章 谈 到 的 网 站 ) 然后 上 路 离开 ， 而 且 也 很 容易 一 去 就 再 也 不 回头 。 


事实 情况 是 ， 绝 大 部 分 人 并 不 是 纯粹 为 了 好 玩 才 使 用 Web 应 用 的 。 他 们 
这 样 做 是 为 了 完成 一 些 事情 然后 继续 回 到 他 们 的 生活 中 去 。 换 句 话 说， 
大 多 数 人 的 主要 目的 是 从 某 个 网 站 离开 。 实 际 上 ， 我 们 之 前 的 每 一 章 都 
在 讨论 如 何 让 人 们 能 更 快 、 更 有 效 而 且 更 有 自信 地 完成 事情 ， 这 样 他 们 
才能 更 快 地 离开 网 站 。 在 这 里 逗留 的 时 间 越 长 ， 他 们 的 满意 程度 就 会 越 
低 。 


但 是 作为 设计 师 ， 我 们 的 目标 难道 不 是 劝说 人 们 逗留 的 时 间 再 长 一 点 
四 ? 


是 的 ， 没 错 。 但 是 这 不 能 靠 让 人 们 陷于 复杂 的 交互 和 让 事情 变 得 困难 来 
实现 。 它 应 当 靠 设计 一 系列 令 人 愉快 的 瞬间 ， 让 用 户 对 产品 感觉 良好 来 
实现 。 所 以 让 用 户 逗 留 的 最 好 方法 是 帮助 他 们 尽 可 能 快 而 且 毫 不 费力 地 
离开 网 站 ， 这 多 少 带 点 讽刺 意味 。 


从 页 面 版 式 到 拖 放 交互 ， 迄 今 为 止 我 们 已 经 探讨 了 如 何 让 事情 变 得 既 简 
单 又 有 效 的 各 种 方法 。 我 们 辟 励 用 户 探索 网 站 、 吸 引 他 们 注册 、 人 带领 他 
们 完成 复杂 的 表单 、 教 导 他 们 使 用 不 熟悉 的 功能 ， 甚 至 从 长 远 角度 来 
理 他 们 的 数据 信息 。 


最 后 一 步 ， 我 们 要 探究 当 他 们 决定 离开 网 站 时 会 发 生 什 么 ， 不 管 是 暂时 
还 是 永久 的 离开 。 
本 书 最 后 一 部 分 ， 我 们 将 重 溯 用 户 Sign-out( 退 出， 的 过 程 ， 讨 论 如 何在 
人 们 离开 网 站 一 段 时 间 后 鼓励 他 们 再 次 光临 。 我 们 还 各 讨论 在 他 们 决定 
永 不 再 来 时 ， 又 应 当 如 何 处 理 那 些 即将 永久 消失 的 账户 。 
离别 或 许 是 既 甜 蜜 又 误伤。 但 对 交互 设计 来 说 ， 即 使 是 离别 的 瞬间 ， 同 
样 也 是 为 顾客 形成 持久 印象 的 契机 。 
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从 Web 应 用 中 Sign-out (退出) 从 来 都 不 是 一 个 复杂 的 任务 ， 但 是 有 些 
网 站 却 把 它 弄 得 远 比 需要 的 更 复杂 ， 而 且 并 不 是 很 多 网 站 都 能 利用 Sign- 





out 的 机 会 来 动员 月 


日 户 再 次 返回 。 





























通常 来 说 ，Sign-out 只 是 单 击 网 页 顶部 角落 里 的 某 个 命令 链接 而 已 。 


例如 在 Blinksale“ 中 ， 你 会 回 到 Sign-in 的 页 面 。 这 种 不 错 的 方法 被 称 作 
Closed System ( 封闭 体系 )， 也 就 是 说 除非 Sign-in， 否 则 你 无 法 看 到 该 
应 用 的 任何 部 分 。 而 Srapblog“ 则 是 另 一 种 情况 ， 单 击 Sign Out 后 你 将 会 
被 送 回 该 站 点 为 非 登 录用 户 所 显示 的 主页 中 去 。 这 也 是 一 种 很 好 的 解决 
方案 ， 被 称 为 Open System ( 开放 体系 )， 在 没有 Sign-in 的 情况 下 你 仍 
然 能 够 看 到 网 站 的 一 部 分 内 容 。 


当然 ， 并 不 是 所 有 的 Sign-out 过 程 都 这 么 清晰 。 


las 
人 心 \: 





QO Blinksale 是 一 个 专业 提供 
译 者 注 





com/。 


化 简 为 繁 


比方 说 LinkedIn“ 的 Sign-out 过 程 ， 会 让 你 疑惑 是 不 是 自己 只 进 
半 。 单 击 Sign Out 链接 之 后 ， 你 将 会 看 到 一 段 文 字 ， 大 概 是 如 下 



































行 了 一 
这 个 


二 
广 忌 、 




















在 线 记 账 及 单据 服务 的 网 站 。 网 址 为 http://www.blinksale. 














@ Srapblog 是 一 个 在 线 建立 多 媒体 剪贴 短 的 网 站 ， 用 户 能 发 布 、 共 享 并 且 能 得 到 打印 


版 本 。 网 址 为 http:Wwww.scrapblog.com/。 一 一 译 者 注 


G@) LinkedIn 是 一 个 方便 用 户 与 同事 和 同学 保持 联系 的 网 站 ， 也 提供 了 各 种 寻求 工作 和 









































商业 合作 的 机 会 。 网 








丝 为 http://www.linkedin.com/。 一 一 译 者 注 
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现在 您 已 经 Sign Out 了 
您 的 浏览 器 将 会 记 住 您 是 谁 ， 因 此 您 仍然 可 以 查看 您 自己 的 主页 。 
然而 ， 如 果 想 查看 或 者 改变 您 的 私人 信息 ， 您 需要 再 次 登录 。 


这 些 后 面 跟 着 一 个 标记 为 Sign Out Completely“〈 完 全 退出 ) 的 按钮 ， 并 且 
附带 说 明 “ 当 你 单 击 这 个 按钮 时 ， 浏 览 器 将 不 会 记录 任何 关于 你 的 信息 ， 
你 必须 输入 电子 邮件 地 址 和 密码 才能 重新 使 用 系统 。” 


不 ， 我 没有 开玩笑 。 


除了 极其 兄长 之 外 ， 这 些 说 明文 字 还 会 让 你 感觉 自己 做 错 了 什么 。 虽 然 
你 已 经 Sign-out 了 ， 现 在 却 可 能 会 想 是 否 还 得 完全 地 Sign-out。 


我 们 都 倾向 于 在 页 面 上 寻找 按钮 和 链接 ， 同 时 忽略 挥 绝 大 部 分 说 明文 字 。 
所 以 可 能 很 多 人 看 到 这 个 Sign Out Completely 的 按钮 都 会 有 些 紧 张 。 看 
到 它 之 后 ， 你 可 能 会 觉得 自己 必须 阅读 这 些 说 明 ， 好 和 弄 清楚 到 底 发 生 了 
什么 。 如 果 不 是 因为 这 个 按钮 让 我 们 感到 自己 的 安全 受到 了 威胁 ， 可 能 
我 们 根本 不 会 去 理 昭 那些 说 明文 字 。 


男 一 个 例子 中 ， 我 们 也 能 看 到 不 必要 的 宛 长 文字 。 在 亚利桑那 州 某 个 银 
行 的 网 站 上 ， 当 你 Sign-out 时 会 进入 一 个 页 面 ， 里 面 是 这 样 陈述 的 : 


感谢 您 使 用 [Acme] 在 线 银 行 系统 ! 您 已 经 成 功 退 出 了 [Acme] 
系统 。 


如 果 您 希望 重新 登录 [Acme]， 或 者 回 到 [Acme] 网 站 ， 请 单 击 
下 方 的 Back to Login 按钮 。 否 则 ， 请 关闭 您 的 浏览 器 窗口 以 便 
结束 当前 对 话 。 


后 面 有 一 个 Back to Login 按钮 。 


因为 登录 界面 位 于 网 站 的 主页 面 上 ， 所 以 你 需要 通过 主页 面 进入 站 点 并 
且 在 主页 面 上 Sign-in。 但 是 当 你 Sign-out 时 ， 却 必须 单 击 某 个 按钮 才能 
回 到 主页 面 ， 而 这 又 没什么 明显 的 理由 。 


而 且 出 于 某 些 奇怪 的 理由 ， 网 站 的 设计 师 认 为 你 需要 用 整整 两 段 文字 才 
能 理解 这 个 Back to Login 按钮 ! 更 糟 的 是 ， 他 们 还 假设 所 有 用 户 都 能 明 
白 那 个 神秘 的 “结束 当前 对 话 ” 是 什么 意思 。 






































图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 


29.2 动员 用 户 返回 205 
为 什么 如 此 简单 的 事情 却 被 弄 得 如 此 复杂 ? 
在 这 种 种 混乱 之 外 ， 只 有 极 少数 网 站 才能 做 到 把 Sign-out 当 作 一 个 传达 
言 县 或 营销 的 契机 。 
C29.2 动员 用 户 返 回 
我 设计 Sign-out 流程 时 ， 总 是 要 么 用 Sign-out， 要 么 用 Open-system Sign- 
out。 但 在 此 基础 上 ， 我 也 希望 能 找到 方法 鼓励 和 众生 用 户 再 度 光 临 网 站 。 


Gmail 在 这 一 点 上 王 得 很 榜 。Sign-out 时 ， 你 会 回 到 Sign-in 页 面 ， 但 
同时 你 也 会 看 到 一 些 他 们 希望 你 能 深入 了 解 的 功能 。 在 这 种 情况 下 ， 
Google 的 Sign-in 页 面 兼 饰 两 角 ， 既 是 Web 应 用 的 首页 面 ， 同 时 又 把 额 
外 的 空间 用 于 行销 推广 ， 如 图 29-1 所 示 。 








Gmaail wei 
Google BETA 


A Google approach to email. 
Gmail is a new kind of webmail, built on the idea that email can be more we 
intuitive, efficient, and useful. And maybe even fun. After all, Gmail has: Sign in to Gmail with your 
Google Account 
Less spam 
Keep unwanted messages out of your inbox with Google's Usemame: 
innovative technology 
Password: 
Mobile access 
Read Gmail on your mobile phone by pointing your F Remember me on this 
phone's web browser to http://gmail.com/app. Leam OREN 
more Sign in 
EE re lcannot access my account 
Over 6190.080913 megabytes (and counting) of free 


storage so youll never need to delete another message. 


| | Whats your Gmail story? Sign up for Gmail 
HH tories from others and share 
| a 


Watch the video» 








29-1 


在 设计 自己 的 Closed-system Sign-out 流程 时 ， 我 窃取 了 这 个 想法 ， 而 同 
时 也 希望 能 更 进一步 。 这 些 系统 中 的 Sign-in/out 页 面 通常 都 没有 很 多 内 
容 ， 因 此 完全 可 以 把 那些 空白 区 域 视 为 用 于 市 场 营 运 的 恨 机。 





我 由 一 个 最 典型 的 Sign-in 页 面 开始 ， 用 户 Sign-out 后 也 将 回 到 这 里 。 它 
包括 用 户 名 和 密码 的 输入 域 、 一 个 是 否 记 住 用 户 Log-in 信息 的 选项 ， 以 
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及 一 个 找 回 遗失 密码 的 命令 链接 。 这 些 元 素 都 被 套 在 一 个 框 体 中 ， 在 页 
面 居中 显示 。 见 图 29-2。 


Username: 


L | 


Password: 
记 forgot my password 


A Remember me for 2 weeks 











图 29-2 
然后 ， 我 把 这 整个 玩意 向 左 移动 ， 开 辟 出 一 块 空间 放置 行销 推广 的 内 容 。 
设计 的 时 候 我 只 是 确立 了 一 个 模板 ， 无 论 什 么 样 的 信息 都 可 以 放 在 这 里 ， 
用 以 描述 产品 的 各 项 优点 。 如 图 29-3 所 示 。 








Username: Did you know? 
EE 二 = With Acme Photos, you can: 


e Tip#1 goes here 
Password: e Tip #2 goes here 


. 
EE | forgotmypassword ® Tip #4 goes here 
e Tip #5 goes here 


Remember me for 2 weeks 
区 To learn more just sign in and hit the "Take a tour link in 








the upper-right corner of the page. 








图 29-3 


29.2.1 空间 的 再 利用 


如 在 第 28 章 所 讨论 的 “欢迎 ”界面 那样 ，Sign-in 页 面 的 推广 区 域 也 可 以 
重复 使 用 ， 例 如 向 顾客 提供 关于 新 功能 的 信息 。 


为 了 更 详细 地 说 明 ， 我 创建 了 男 一 个 线 框图 版 本 ， 如 图 29-4 所 示 。 
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ria New in Acme Photos 
- Weve recently added several new features to make your 
一 experience even better! 


Password: e Feature #1 goes here 
e Feature #2 goes here 


EE | iforgotmypassword e Feature #3 goes here 


i Remember me for 2 weeks Learn more about these featuresl 


To get started, just sign in and start having fun! 











图 29-4 


为 了 限制 可 以 放置 到 区 域 中 的 文本 数量 ， 我 决定 把 该 区 域 设 定 得 相当 小 ， 
仅仅 和 左边 的 Sign-in 界面 一 样 大 。 通 过 这 种 办 法 ， 不 管 是 为 新 的 或 已 有 
功能 做 广告 还 是 其 他 什么 内 容 ， 任 何 使 用 该 区 域 的 人 都 必须 使 用 简短 的 
陈述 或 者 项 目 列表 来 表现 〈 记 住 ， 文 本 越 长 ， 越 没 人 读 )。 

29.2.2 发布 消 息 

Web 应 用 的 Sign-out 流程 完全 可 以 非常 简单 ， 只 需 点 击 一 次 然后 退回 到 
Sign-in 页 面 即 可 。 但 如 果 加 入 一 点 创造 力 ， 这 个 本 来 很 空 的 页 面 也 可 以 
转变 成 一 次 市 场 营销 的 机 会 。 

它 可 以 通过 指出 用 户 尚 未 发 现 的 功能 发 励 用 户 再 次 回 到 站 点 ， 或 者 引导 
用 户 了 解 新 功能 ， 甚 至 可 以 宣布 网 站 新 取得 的 成 就 ， 或 者 其 他 影响 到 整 
个 用 户 群 体 的 新 闻 ， 例 如 发 布 例 行 维护 通知 等 。 

而 正 因为 这 个 页 面 除 此 之 外 再 无 其 他 任何 东西 ， 因 此 与 Web 应 用 中 其 他 
拥挤 的 页 面相 比 ， 文 本 会 更 加 吸引 人 们 的 注意 。 
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尘封 用 户 (Dusty User)， 或 者 如 37signals 在 Signal vs. Noise 〈 信 和 号 与 品 
音 ) 中 的 文章 Waking up the sleepers (唤醒 沉睡 者 ) "里 所 称呼 的 “沉睡 
者 ”， 指 的 是 那些 注册 了 某 个 Web 应 用 或 者 服务 ， 却 又 放弃 了 账户 的 人 。 
这 种 情况 很 有 可 能 发 生 ， 例 如 用 户 对 某 个 产品 厌倦 了 ， 或 者 找到 了 一 个 
更 喜欢 的 替代 品 ， 甚 至 仅仅 只 是 因为 他 们 把 这 个 应 用 给 忘 


到 现在 为 止 ， 我 可 能 已 经 是 上 百 个 Web 应 用 的 “人 尘封 用 户 ” 了 ， 我 相信 
你 也 一 样 。 


那么 作为 设计 者 ， 我 们 应 该 如 何 应 对 这 种 局 面 呢 ? 事 实 上 我 们 的 目标 是 
让 用 户 保持 兴趣 和 热情 ， 那 么 我 们 应 该 如 何 让 这 些 沉睡 者 复苏 并 再 度 活 
跃 起 来 呢 ? 


这 是 一 个 我 很 想 回 答 的 问题 ， 但 通常 的 思路 认为 ， 这 种 设计 工作 都 是 市 
场 部 门 的 职责 。 广 泛 地 宣传 、 在 电视 和 网 络 上 做 广告 、 提 供 优惠 或 者 其 
他 折扣 ， 这 些 都 是 传统 的 宣传 手段 ， 人 们 认为 它们 足以 让 那些 “尘封 用 
户 ” 行 动 起 来 。 
但 是 ， 尽 管 这 些 营 销 手 段 在 保持 品牌 知名 度 方 面 做 得 很 优秀 (或 者 很 差 
劲 )， 它 们 却 很 少 能 真正 地 鼓舞 用 户 。 吸 引 我 们 注意 的 那些 东西 其 实 非 常 
它们 不 是 路 边 广 告 牌 上 不 停 喧嚣 的 宣传 妙 句 ， 而 是 一 些 私 人 信 
息 ， 是 针对 于 我 们 的 需求 而 建立 的 诚 悬 联系。 






























































































































































人 Signal vs. Noise 是 37signals 的 一 个 博客 ， 主 要 内 容 包括 设计 、 用 户 体 验 、 文 化 等 。 
Waking up the sleepers 是 其 中 一 篇 日 志 ， 具 体 网 址 为 http://www.37signals.com/ svn/ 
译 者 注 




















posts/611-waking-up-the-sleepers。 
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换 名 话说， 唤醒 这 些 沉睡 者 绝 不 仅仅 是 市 场 部 门 的 工作 ， 它 同样 也 是 设 
计 师 的 职责 。 毕 竟 ， 和 顾客 沟通 并 且 建 立 联系 ， 在 这 一 点 上 我 们 做 得 最 
好 。 


为 了 更 好 地 描述 这 个 观点 ， 我 设计 了 一 个 解决 方案 清单 ， 对 象 是 一 个 虚 
拟 的 项 目 ， 名 为 Acme Photos (Acme 相册 )。 


C30.1 变 总 惰 为 热情 


我 们 抹 去 “尘封 用 户 ” 所 需要 的 工具 ， 有 很 多 其 实 早 就 已 经 存在 ， 而 且 
在 其 他 某 些 情况 下 我 们 已 经 使 用 过 了 。 


比如 说 ， 我 们 很 多 人 都 已 经 发 送 过 Newsletter (邮件 时 事 通 讯 )。 尽 管 
通常 它们 都 被 用 于 公司 的 最 新 报道 或 者 描述 新 功能 ， 但 也 同样 能 够 提醒 
“尘封 用 户 ” 现 在 有 个 好 理由 回 到 网 站 并 开始 再 度 使 用 它 。 


为 了 让 这 种 效果 最 大 化 ， 我 们 可 以 在 Newsletter 中 加 上 链接 进一步 鼓励 
“人 尘封 用 户 ” 进 行 探索 。 此 外 还 可 以 提供 折扣 或 者 其 他 因素 来 吸引 这 些 用 
户 。 以 下 有 一 个 例子 : 


有 一 段 时 间 没 有 使 用 Acme 相册 了 ? 


让 我 们 使 你 相信 这 值得 瞧 一 瞧 ! 我 们 已 经 创建 了 一 系列 短小 而 
有 趣 的 视频 教程 ， 展 示 了 一 些 很 棒 的 新 特性 。 而 且 它 们 都 在 一 
个 地 方 ， 所 以 你 能 很 快 上 手 并 且 了 解 我 们 现在 能 为 您 做 些 什么 。 


了 解 我 们 的 新 特性 ! 


如 果 这 还 不 够 ， 我们 还 愿意 为 你 提供 特殊 优待 。 如 果 现 在 距 你 
上 一 次 登录 账户 已 经 超过 了 1 个 月 ， 我 们 将 在 2 月 底 之 前 为 你 
购买 的 所 有 商品 提供 50% 的 折扣 ! 


只 需 在 付款 时 输入 以 下 推广 码 : 
FEB PROMO 
开始 购物 ! 


明确 地 针对 “人 尘封 用 户 ” 的 需求 ， 同 时 为 他 们 提供 足够 的 动机 ， 我 们 将 吸 
引 那些 播 摆 不 定 的 人 们 发 现 网 站 的 价值 ， 为 自己 的 站 点 提供 第 二 次 机 会 。 
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30.1.1 个 性 化 沟通 

另 一 个 选择 是 发 送 个 性 化 信件 。 例 如 ， 我 最 近 收 到 了 一 封 传统 信件 ， 来 
自 一 个 信用 卡 公司 ， 我 有 一 阵子 没 使 用 那个 账户 了 。 它 用 一 种 幽默 的 语 
调 简 单 地 询问 :“ 咱 们 最 近 干 了 些 什 么 ? 还 是 什么 也 没 干 ? ” 


这 封 信件 的 立意 在 于 ， 它 让 我 知道 该 公司 已 经 注意 到 我 有 一 段 时 间 没 有 
使 用 自己 的 信用 卡 ， 并 且 鼓 励 我 再 次 用 这 张 卡 消费 。 他 们 在 信 中 为 自己 
没 能 让 这 张 卡 体现 出 价值 而 道歉 ， 而 且 提 供 了 一 些 升级 举措 ， 以 确保 我 
能 从 信用 卡 中 得 到 确实 想 要 的 东西 ， 例 如 持 卡 消费 能 获得 的 旅游 及 现金 
回馈 、 信 用 额度 的 提升 ， 以 及 在 线 付款 功能 。 同 时 他 们 还 声明 只 要 我 能 
再 次 成 为 活跃 的 信用 卡 用 户 ， 他 们 愿意 竭尽 所 能 满足 我 的 需求 。 

我 真 的 非常 感激 他 们 ， 特 别 是 因为 我 正在 开始 Miskeeto 计划， 需要 一 
张 信 用 卡 为 公司 开支 。 我 不 仅 打 电 话 为 现 有 这 张 卡 办 理 了 升级 ， 还 同时 
申请 了 另 一 张 商务 信用 卡 。 从 那 时 候 起 ， 我 开始 有 规律 地 使 用 这 两 张 卡 ， 
成 为 该 公司 一 个 良好 的 消费 者 。 而 所 有 这 一 切 都 是 因为 他 们 给 我 的 一 封 
信和 吸引 了 我 的 注意 。 


以 下 是 转换 成 电子 邮件 形式 的 一 个 例子 。 
亲爱 的 Maggie: 
我 们 注意 到 你 有 一 段 时 间 没 有 使 用 Acme 相册 了 ， 于 是 怀疑 自己 
做 错 了 什么 。 你 是 不 是 遇 到 其 他 什么 人 了 ? 你 不 再 爱 我 们 了 吗 ? 
我 们 需要 你 再 给 一 次 机 会 ! 
为 了 证 明 自 己 不 变 的 真心 ， 我 们 已 经 创建 了 一 系列 短小 而 有 趣 
的 视频 教程 ， 展 示 了 一 些 很 棒 的 新 特性 。 而 且 它 们 都 在 一 个 地 
方 ， 所 以 你 能 很 快 上 手 并 且 了 解 我 们 现在 能 为 您 做 些 什么 。 
了 解 我 们 的 新 特性 1 
如 果 这 还 不 够 ， 我 们 还 愿意 为 你 提供 特殊 优待 。 如 果 现 在 距 你 
上 一 次 登录 账户 已 经 超过 了 1 个 月 ， 我 们 将 在 2 月 底 之 前 为 你 
购买 的 所 有 商品 提供 50% 的 折扣 ! 











中 见 第 15 章 注 。 一 一 译 者 注 
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只 需 在 付款 时 输入 以 下 推广 码 : 
EB PROMO 
开始 购物 | 


我 们 渴望 让 你 成 为 一 位 开心 的 顾客 。 如 果 这 封 邮件 没有 成 功 ， 
a E 为 你 做 些 什 么 。 通 过 以 下 链接 向 我 们 发 条 消 
， 你 将 能 和 真人 接触 并 且 进 行 真 实 的 交谈 ， 让 我 们 知道 如 何 


和 Acme 相册 的 职员 交谈 | 
我 们 希望 很 快 能 再 次 见 到 你 。 真 的 。 我 们 想念 你 。 





你 真诚 的 9 
Acme 相册 团队 
就 像 你 所 看 到 的 ， 我 在 这 封 电 子 邮 件 里 站 在 一 种 失恋 的 角度 。 访 谐 和 因 
默 对 于 抓 住 用 户 注意 力 来 说 相当 有 帮助 。 


最 重要 的 是 ， 我 们 发 出 去 的 讯息 应 该 富有 人 人 情 味 ， 而 不 是 呆板 的 、 充 斥 
着 行业 辞 令 和 广告 语气 的 营销 套话 。 这 类 讯息 应 当 是 一 种 会 话 般 的 口吻 ， 
完全 聚焦 于 接受 方 ， 而 不 是 我 们 自己 。 

当然 ， 由 于 这 两 个 例子 都 包含 了 通 向 视频 教程 的 链接 ， 我 方案 清单 中 下 
一 项 就 是 要 创建 一 堆 短 小 精湛 的 Screencast。 在 第 8 章 我 们 谈 到 过 如 何 使 
用 视频 作为 辅助 ， 所 以 这 里 我 不 会 再 涉及 那些 细 市 。 


这 些 东西 应 该 能 有 帮助 ， 但 我 们 怎样 才能 弄 清 楚 这 些 用 户 当 初 被 尘封 的 
原因 呢 ? 


30.1.2 ”调查 


首先 ， 我 们 可 以 问 他 们 为 什么 离开 这 么 久 。 为 了 实现 这 一 点 ， 我 们 可 以 
在 解决 方案 清单 里 面 加 上 调查 。 
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使 用 例如 SurveyMonkey "这 类 的 服务 ， 我 们 可 以 轻松 地 开展 客户 对 Acme 
相册 感觉 如 何 的 小 调查 ， 并 和 优惠 或 其 他 奖励 项 目 一 起 发 送 给 “尘封 用 
户 ”。 


这 种 调查 的 完成 率 给 庸 置 括 会 很 低 。 但 即使 具有 很 小 一 部 分 人 回应 ， 我 
们 也 可 能 从 中 学 到 很 多 东西 ， 比 如 可 以 了 解 在 应 用 中 还 差 人 什么， 或 者 是 
哪里 让 这 些 用 户 失望 。 


通过 调查 ， 我 们 能 够 看 到 用 户 的 各 种 倾向 ， 并 根据 反馈 考虑 如 何 改变 设 
Ts 
但 调查 并 不 是 最 后 一 步 模 。 形 象 一 点 来 说 ， 我 们 也 可 以 和 用 户 坐 下 来 边 
喝 边 聊 。 


30.1.3 ”对 话 的 机 会 


正如 Cluetrain Manifesto 一 书 的 作者 所 说 的 ,“ 市 场 即 会 话 ”。 但 只 有 很 
少 的 公司 真正 去 聆听 他 们 的 客户 以 及 从 事 真 正 的 会 话 。 


为 了 让 这 种 会 话 开展 下 去 ， 我 们 可 以 为 “人 尘封 用 户 ” 提 供 一 个 机 会 与 真 
正 的 开发 团队 成 员 交谈 ， 并 把 他 们 的 关注 点 和 愿望 描述 出 来 。 这 也 可 以 
通过 电子 邮件 形式 实现 ， 因 此 重要 的 只 是 找到 方法 让 它 更 容易 一 些 。 


这 可 以 很 简单 ， 例 如 创建 一 个 电子 邮件 地 址 ， 并 承诺 用 户 发 送 的 每 一 条 
评论 都 会 得 到 真人 回应 。 但 我 们 还 可 以 走 得 更 远 。 例 如 ， 我 们 可 以 邀请 
那些 “尘封 用 户 ” 成 立 一 个 小 组 ， 目 标 聚 焦 于 产品 日 后 的 改进 工作 。 

这 些 用 户 可 以 参与 论坛 或 者 讨论 列表 ， 和 内 部 员工 一 起 讨论 他 们 希望 看 
到 的 变化 。 为 了 补偿 他 们 付出 的 时 间 和 精力 ， 我 们 可 以 提供 商品 折扣 作 
为 参与 活动 的 酬劳 。 






























































能 将 调查 结果 以 PDF 格式 存档 。 用 户 只 需 将 问卷 的 地 址 以 链接 形式 添加 到 网 站 、 
件 等 处 ， 就 能 通知 被 调查 者 填写 。 而 且 只 要 调查 对 象 低 于 100 就 无 需 支 付费 用 。 
时 也 支持 中 文 。 网 址 为 http://www.surveymonkey.com/。 一 一 译 者 注 
@ Cluetrain Manifesto〈( 线 车 宣言 )，Weinberger、Searls 和 Levine 于 1999 年 合 著 。 中 
文 版 名 为 《市 场 就 是 谈话 : 影响 传统 企业 思维 的 95 个 观点 》 中信 出 版 社 出 版 。 有 

人 认为 该 书 实际 上 是 Web 2.0 浪潮 的 先知 ， 甚 至 其 作者 也 可 归 和 人 信息 资本 主义 的 伟 
大 预言 者 行列 。 该 书 网 站 为 http:/www.cluetrain.com/， 可 免费 阅读 原版 内 容 。 
一 一 译 者 注 








QO SurveyMonkey 是 一 个 在 线 问卷 调查 网 站 ， 提 供 各 种 问卷 模板 ， 可 定制 性 较 高 ， 还 
Bb 
同 



















































































图 灵 社 区 会 员 cindy282694 专 享 尊重 版 权 


30.1 变 促 惰 为 热情 213 


为 了 创造 一 种 “排外 ”的 感觉 ， 我 们 可 以 限制 小 组 的 编制 ， 例 如 ，100 位 
用 户 。 我 们 可 以 在 向 所 有 “人 尘封 用 户 ” 发 送 的 电子 邮件 邀请 中 解释 小 组 
的 细节 ， 然 后 告诉 他 们 只 有 100 个 人 将 会 被 选中 。 


排外 感 将 会 激发 兴趣 。 把 小 组 限制 为 100 个 人 将 会 让 用 户 感 到 自己 正在 
参与 很 特殊 的 活动 。 同 时 这 也 会 把 小 组 的 规模 控制 在 可 管理 的 范围 内 ， 
长 远 来 说 会 对 公司 真正 起 作用 。 而 另 一 方面 ， 那 些 未 获 选 加 入 小 组 的 用 
户 也 会 认识 到 公司 正在 采取 措施 以 图 打动 消费 者 。 


30.1.4 不 要 做 得 太 过 火 
考虑 了 上 述 一 切 之 后 ， 成 功 的 关键 在 于 不 要 做 得 太 过 火 。 


如 果 茶 个 用 户 只 是 想 独自 采 着 ， 我 们 可 能 很 容易 就 会 因为 过 多 的 打扰 而 
冒犯 他 ， 甚 至 会 迫使 他 注销 原本 只 是 放任 不 管 的 账户 。 与 此 同时 我 们 也 
不 希望 让 人 有 抓 着 稻草 不 放 的 感觉 ， 所 以 这 里 需要 制定 一 些 规则 。 


当 某 个 账号 被 尘封 了 相对 很 长 一 段 时 间 之 后 ， 我 们 才 应 该 发 送 第 一 封 通 
知 他 们 查看 新 功能 的 电子 邮件 。 如 果 是 那 种 通常 需要 每 天 使 用 的 产品 ， 
电子 邮件 应 当 发 送 给 那些 至 少 1 个 月 没有 Sign-in 的 用 户 。 而 像 我 们 的 
Acme 相册 这 种 平均 每 周 登录 一 次 的 产品 ， 电 子 邮件 应 当 发 送 给 3 个 月 没 
有 Sign-in 的 用 户 。 


这 里 并 没有 什么 数学 公式 ， 而 只 是 根据 使 用 频率 推算 的 一 个 大 概 值 。 


而 下 一 步 ， 在 第 一 封 电子 邮件 发 送 一 至 两 周 之 后 ， 再 发 送 一 封 更 个 人 化 
的 电子 邮件 ， 比 如 刚 讲 到 的 那个 例子 。 这 个 额外 的 讯息 将 会 进一步 鼓励 
用 户 ， 因 为 第 一 封 电子 邮件 还 记忆 犹 新 。 如 果 某 位 用 户 到 此 时 还 是 什么 
也 不 做 ， 我 们 最 好 就 让 他 一 个 人 采 着 吧 。 

至 于 “人 尘封 用 户 ” 们 构成 的 小 组 ， 明 显 地 一 年 只 能 组 建 一 到 两 次 ， 每 个 
小 组 可 以 持续 数 个 月 。 

关于 小 组 的 电子 邮件 可 以 说 明 将 会 为 期 3 到 4 个 月 ， 而 当 本 期 结束 后 将 
会 再 组 建新 的 一 个 小 组 。 同 时 也 可 以 说 明成 员 并 没有 义务 必须 得 表现 活 
路 ,但 是 那些 频繁 的 参与 者 将 会 绪 得 更 多 的 奖励 ， 例 如 更 低 的 折扣 等 。 
如 果 每 年 可 以 组 建 并 维持 2 次 这 种 小 组 ， 邀 请 的 电子 邮件 应 当 在 第 一 次 
讨论 之 前 两 周 左右 时 间 发 送出 去 。 那 些 接受 邀请 的 人 需要 这 段 时 间 来 重 
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新 熟悉 产品 ， 甚 至 还 有 可 能 向 自己 的 朋友 提 及 这 个 公司 能 做 这 么 一 件 事 ， 
给 人 的 感觉 棒 极 了 。 

通过 折扣 、 山 默 庶 谐 的 讯息 ， 以 及 提供 和 真正 开发 团队 成 员 关 于 产品 进 
行 交 流 的 机 会 ， 那 些 “ 人 尘封 用 户 ” 将 会 有 足够 的 契机 对 产品 重新 产生 兴 
趣 。 

最 后 ， 所 有 这 些 都 是 有 效 的 客户 服务 行为 。 每 一 个 设计 的 决定 、 每 一 次 
会 话 、 每 一 篇 博客 日 志 、 评 论 、 电 子 邮 件 、 电 话 等 ， 它 们 都 是 为 了 提供 
良好 的 客户 服务 。 

做 到 这 些 ， 你 就 能 收获 忠诚 。 
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令 人 悲哀 的 是 ， 并 不 是 每 个 人 都 热爱 我 们 的 劳动 成 果 ， 不 管 它 有 多 好 。 
我 知道 这 一 点 令 人 不 快 ， 但 它 是 事实 。 哪 怕 我 们 做 了 自己 所 能 做 的 一 切 
来 劝 服 用 户 注册 ， 设 计 出 不 言 而 喻 的 交互 和 说 明 来 教导 他 们 使 用 产品 ， 
为 产品 提供 大 量 的 价值 ， 并 且 让 数据 管理 尽 可 能 地 轻松 人 简单， 甚至 尽力 
消除 那些 尘封 的 用 户 。 但 还 是 有 很 多 时 候 ， 客 户 离开 了 就 再 也 不 回头 。 


民 管 这 是 一 个 悲伤 的 时 刻 ， 就 像 卫 辱 柱 上 的 标记 ， 但 我 们 仍然 无 法 知道 
它 到 底 何 时 会 发 生 。 并 没有 实时 的 报警 器 能 告诉 我 们 某 人 在 什么 时 候 会 
除 目 己 的 帐户， 我 们 也 无 法 趴 在 他 们 的 肩头 目击 导致 这 一 宿命 般 瞬 间 
的 体验 到 底 是 什么 。 相 反 的 ， 它 的 发 生 超越 了 我 们 的 知识 。 我 们 所 能 万 
到 的 只 是 那些 为 了 衡量 自己 进展 而 收集 的 数据 ， 而 它们 把 这 些 我 们 赖 以 
生计 的 客户 简化 成 了 一 系列 数字 和 图 表 。 


就 像 在 Web 应 用 里 的 其 他 所 有 东西 一 样 ， 我 们 挽留 客户 的 最 后 防线 仍然 
需要 自动 化 。 只 有 这 样 系统 才能 帮 我 们 工作 ， 我 们 才能 有 时 间 采 在 家 里 
看 看 The Daily Show with Jon Stewart- 之 类 的 电视 节目 。 


而 最 重要 的 是 ， 我 们 需要 优雅 得 体 地 应 付 这 种 状况 。 这 听 上 去 似乎 有 些 
违反 常理 ， 然 而 遗弃 一 个 账户 本 来 就 应 该 像 其 他 任何 事情 一 样 简 单 容 易 。 
于 每 一 款 应 用 程序 面临 的 挑战 都 各 有 不 同 ， 而 且 它 们 的 目的 和 领域 也 
不 尽 相 同 ， 所 以 我 认为 与 其 只 讲 一 个 单独 的 故事 ， 还 不 如 针对 自己 曾经 
面 对 的 各 种 情况 举 一 些 实例 要 来 得 更 有 效果 。 



































































































































































































































































































































































































































OThe Daily Show with Jon Stewart( 乔 恩 每 日 脱口 秀 ) 简称 The Daily Show， 每 周一 
至 周 四 晚 11 点 首播 。Daily Show 不 同 于 传统 的 BBC News 或 CBS Fox CNN 的 每 
日 新 闻 栏目 ， 而 是 从 搞笑 的 角度 演绎 每 日 国内 外 发 生 的 重大 新 闻 。 每 期 除了 邀请 
嘉宾 做 访谈 ， 还 有 很 多 有 趣 的 单元 ， 整 个 节目 笑 声 不 断 。 该 栏目 网 址 为 http://www. 
thedailyshow. com/。 译 者 注 
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不 管 是 何 种 情况 ， 我 者 














我 不 知道 是 否 有 什么 理论 
一 件 正确 的 事 。 

想 想 看 。 

感觉 自己 受 困 于 茶 项 服务 
可 能 仅仅 只 是 因为 没有 有 
种 事情 发 生 ， 他 就 会 慎 慨 ， 
一 。 同 样 地 ， 如 果 一 个 人 





由 他 们 去 吧 


优雅 地 失败 








bp 尽量 避免 在 任何 时 候 让 客户 感到 自己 受到 了 限制 。 



















































































一 个 机 


应 商 来 说 有 效果 ， 





这 样 不 仪 和 能 避 





以 下 是 我 的 建议 。 


31.1.1 





打点 行李 


首先 ， 让 客户 能 为 自己 打 
人 数据 的 应 用 程序 ， 必 须 


县 的 方式 ， 否 则 客户 在 一 

















可 以 验证 我 的 这 种 说 法 ， 但 是 我 非常 确信 这 是 


























或 协议 的 用 户 会 感到 自己 受到 了 限制 ， 而 理由 














效 的 方法 将 注意 力 转 到 其 他 东西 上 去 。 一 旦 这 
而 愤慨 是 让 菜 和 人 说 你 坏话 极为 有 效 的 方法 之 
在 任何 时 候 发 觉 自己 即将 受到 限制 ， 他 绝 不 会 









































待 更 长 时 间 ， 反 而 会 马上 逃脱 。 这 种 困 住 用 户 的 战略 可 能 对 手机 服务 供 
但 对 网 络 来 说 绝 无 可 能 
所 以 ， 即 使 我 们 在 挽留 客户 的 战役 中 失败 了 ， 也 要 在 这 个 过 程 中 保持 我 
们 的 尊严 。 























关 亿 让 我 们 看 上 去 过 于 绝望 ， 同 时 还 能 抓 住 最 后 











会 让 客户 对 我 们 留 下 好 的 印象 。 














点 行李 ， 这 点 非常 重要 。 例 如 某 个 用 于 管理 个 





























为 日 后 可 能 的 注销 行为 提供 一 种 可 靠 的 保留 信 








方便 用 户 集中 组 织 小 型 项 
在 这 方面 就 做 得 很 好 ， 它 的 账户 页 面 提供 了 Export Your Data〈 导 出 你 的 
数据 ) 的 功能 ， 如 图 31-1 
所 有 的 内 容 就 会 生成 一 个 
就 处 于 极 易 访问 的 账户 页 面 中 ， 也 能 够 用 来 提升 或 缩减 自己 的 订阅 计划 ， 














或 者 设置 其 他 账户 信息 。 








开始 根本 就 不 会 感 兴 趣 。 





目 以 及 搜集 内 容 的 Backpack ”(37signals 开发 ) 






































所 示 。 只 需 单 击 这 个 链接 ， 你 的 Backpack 页 面 
XML 文件 并 发 送 到 你 的 电子 邮件 中 去 。 该 功能 
























































这 意味 着 你 无 需 任何 努力 就 能 取消 自己 的 账户 。 














GD Backpack〈 背 包 ) 是 一 款 信息 组 织 、 日 历 、 工 作 安排 的 在 线 软 件 。 其 简洁 的 应 用 界 





















































能 帮助 用 户 管理 手中 的 项 目 ， 还 能 从 许 许多 多 的 有 用 资源 那里 抓 取 自 己 的 所 需要 
的 数据 。 该 软件 网 址 为 h 























ttp://www.backpackit.com/。 一 一 译 者 注 
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没有 隐藏 页 面 ， 没 有 复杂 的 步骤 ， 只 要 在 任何 一 个 Backpack 页 面 上 进行 
一 系列 单 击 操作 ， 你 就 能 导出 所 有 的 数据 然后 取消 自己 的 账户 。 





























Export your data 
Export your data to XML format (images & files are not included) 





Cancel your account 


Cancelling your account will immediately and permanently delete all data in your account. 
l understand and !d still like to cancel my account (for your safety, you must confirm this 
action on the next screen). 





图 31-1 


知道 很 容易 取消 Backpack 账户 这 一 事实 ,会 让 人 们 在 一 开始 就 愿意 接触 
这 球 应 用 程序 。 由 于 转换 所 需 的 代价 (选择 其 他 应 用 用 户 所 需 花 费 的 时 
间 和 人 金钱) 非常 低廉， 用 户 从 开始 使 用 产品 时 就 感觉 很 舒适 


Google Reader 是 一 葡 博 客 阅 读 器 程序 ， 能 让 你 导出 自己 收藏 的 所 有 RSS- 
feed 的 URL， 如 图 31-2 所 示 。 你 可 以 把 它们 导入 到 另 一 坎 程 序 中 ， 从 中 
断 处 重新 拾 起 一 切 。 很 多 博客 阅读 器 程序 都 文 持 导入 这 种 列表 ， 所 以 你 
完全 可 以 在 一 天 当中 尝试 各 种 阅读 器 ， 逐 一 试用 直到 找到 那个 最 适合 你 
的 为 止 。 




































































Import your subscriptions 
If you are switching from another feed reader, you can import your existing subscriptions into Google Reader. To do 


this, you first have to export your subscriptions in a standard format called OPML. Leam more about exporting your 
Subscriptions from another feed reader. 


Select an OPML file: | Browse... 


Upload 





Export your subscriptions 


Export your subscriptions as an OPML file. lore info OPML files. 
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而 在 文件 在 线 存 储 系统 DropSend” 中， 在 你 取消 账户 之 前 所 需要 做 的 只 
是 把 所 有 存储 的 文件 全 部 下 载 到 自己 的 计算 机 里 即 可 。 

31.1.2 ” 离 去 却 ( 也 许 ) 并 未 失去 

而 在 上 述 这 些 例子 中 ， 用 户 取消 账户 的 行为 本 身 也 非常 简单 。 


在 Backpack 里 ， 你 只 需 点 击 3 次 就 能 取消 一 个 账户 : Account〈 上 账户 ) 链 
接 、Cancel My Account 〈 取 消 我 的 账户 ) 链接 ， 以 及 Yes, permanently cancel 
and delete my account 〈 是 的 ， 永 久 取消 并 删除 我 的 账户 ) 确认 按钮 。 


点 击 3 次 ， 你 就 完事 了 ， 再 也 没有 比 这 更 简单 的 了 。 当 然 ， 除 了 Google 
Reader。 










































































在 Google Reader 里 你 无 需 做 任何 事 。 因 为 Google 提供 了 一 种 Single- 
Sign-On (一 站 式 登 录 ， 简 称 SSO) 的 功能 ， 让 你 能 用 同一 个 用 户 名 和 密 
码 登 录 所 有 的 Google 服务 。 因 此 不 管 你 使 用 与 否 ，Google Reader 总 是 
处 于 开放 状态 ， 并 且 Google Calendar (Google 日 历 )、Google Documents 
(Google 文件 ) 和 Gmail 都 是 如 此 。 如 果 想 使 用 另 一 款 阅读 需 程 序 ， 例 如 
Blosglines2， 仅 仅 只 需 把 你 的 订阅 地 址 导出 为 OPML (Outline Processor 
Markup Language)“ 文 件 ， 然 后 导入 到 Bloglines 里 即 可 。 























而 在 DropSemd 里 ， 也 只 需 单 击 My Account (我 的 账户 ) 标签 页 、Please 
Cancel My Account《〈 请 取消 我 的 账户 ) 链接 ， 然 后 单 击 确认 链接 Cancel 
my account and delete all files〈 取 消 我 的 账户 并 删除 所 有 文件 )。 


不 管 是 什么 应 用 程序 ， 客 户 离开 都 应 该 是 一 件 非 常 简单 的 事 。 一 直 以 来 ， 
你 为 了 用 户 在 产品 中 有 一 个 完美 的 体验 而 尽 了 最 大 的 努力 ， 而 最 后 却 想 
欺骗 或 者 强迫 客户 违背 自己 的 意愿 留 在 这 里 ， 这 对 你 没有 帮助 ， 对 客户 
也 没有 帮助 ， 只 会 导致 最 坏 的 口头 宣传 效应 。 客 户 会 在 他 们 的 博客 里 说 











































































































Q@ DropSend 能 让 用 户 发 送 1G 容量 的 超大 尺寸 文件 (普通 E-mail 附件 限于 10M 以 






































内 )， 并 提供 文件 在 线 备份 、 共 享 等 功能 。 但 更 高 级 的 服务 需要 收费 。 网 址 为 http:// 
dropsend.com/。 译 者 注 











@) 在 Google Reader 推出 以 前 ，Bloglines 可 以 说 是 最 好 、 使 用 人 数 最 多 的 RSS 阅读 
器 ， 但 随后 一 直 未 能 超越 Google Reader。 于 2005 年 被 Ask Jeeves 收购 。 网 址 为 
http://www.bloglines.com/。 译 者 注 

@ OPML 即 “ 大 纲 处 理 标记 语言 ” 也 是 一 种 XML 规范 的 文件 格式 。 它 提供 了 一 种 批 
量 RSS 导入 导出 功能 ， 即 可 以 把 多 个 RSS 订阅 地 址 集中 到 一 个 XML 文件 里 面 。 

一 一 译 者 注 
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你 的 坏话 ， 并 且 劝 告 其 他 人 离 你 越 远 越 好 。 
不 过 ， 你 仍然 可 以 做 最 后 一 次 尝试 ， 劝 阻 客户 的 离开 。 


DropSend 的 账户 取消 程序 (当然 只 针对 免费 账户 ) 会 引 疝 一 个 页 国 


你 的 DropSend 账户 不 会 花费 你 的 任何 成 本 …… 


你 确定 真 的 想 取消 吗 ? 这 是 DropSend 的 免费 计划 ， 你 无 需 任 
何 成 本 。 为 什么 不 保留 你 的 账户 ， 以 防 有 一 天 需要 发 送 某 个 大 
文件 ? 或 者 需要 再 次 往 DropSend 里 备份 什么 东西 ? 


如 果 你 的 账户 被 取消 ， 你 所 有 的 文件 都 会 立刻 永久 性 地 删除 。 
这 项 操作 无 法 撤销 ! 


取消 我 的 账户 并 删除 所 有 文件 
回 到 我 的 账户 


这 段 话 非 常客 气 ， 是 一 种 友好 的 语调 ,而 且 可 能 在 一 段 时 间 内 确实 会 收 到 
效果 。 就 如 同 它 所 指出 的 ， 一 个 拥有 免费 账户 的 人 确实 没有 理由 取消 它 ， 
他 完全 可 以 轻松 地 保留 账户 以 防 日 后 需要 。 
另 一 个 选择 是 在 用 户 取消 账户 时 发 送 一 封 最 后 的 电子 邮件 。 里 面 可 以 包 
括 这 样 的 内 容 : 
看 到 你 离 去 我 们 感到 非常 遗憾 ! 我 们 希望 你 在 Acme 相册 中 获 
得 了 良好 的 体验 ， 而 且 希 望 我 们 没有 为 你 带 来 任何 方式 的 冒犯 
或 不 便 。 
如 果 你 原意 给 我 们 最 后 一 次 机 会 ， 我 们 会 非常 乐意 告诉 你 一 些 
我 们 的 新 特性 ， 并 且 为 你 的 所 有 订购 提供 折扣 。 


了 解 新 特性 并 且 接 受 折扣 ! 
但 如 果 你 真 的 准备 离开 我 们 ， 希 望 你 能 花 一 点 时 间 告 诉 我 们 为 





由 



































什么 。 这 对 我 们 改进 站 点 将 有 莫大 的 帮助 ， 也 许 以 后 还 能 再 次 
夺回 你 的 心 。 


告诉 我 们 哪里 出 了 问题 。 
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感谢 你 一 直 以 来 所 做 的 一 切 。 我 们 非常 感激 ， 而 且 再 次 地 ， 很 
踪 贵 憾 看 到 你 离 去 。 真心 祝 你 好 运 。 


不 用 那 种 绝望 般 的 满腹 牢骚 ， 我 们 可 以 最 后 一 次 请 求 正 要 开门 上 路 的 客 
户 多 去 留 一 段 时 间 并 再 给 我 们 一 次 机 会 ， 而 这 并 不 会 失去 我 们 的 尊严 。 

优雅 的 失败 对 于 Web 应 用 来 说 是 非常 容易 做 到 ， 而 我 们 留 给 客户 的 正面 
印象 将 远 比 失去 客户 所 带 来 的 痛苦 要 来 得 长 入。 如 果 应 对 得 体 ， 哪 怕 是 
一 个 并 不 满意 的 客户 也 能 为 我 们 带 来 积极 的 反馈 ， 甚 至 是 口头 上 的 宣传 。 


而 这 所 需要 的 只 是 在 客户 离开 时 多 表现 出 一 点 敏锐 、 苯 重 和 专业 。 
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在 Designing the 


Obvious 一 书 中 ， 我 
需 的 7 条 核心 原则 ， 以 及 如 何 把 它们 运用 





























到 实际 项 目 

















设计 伟大 的 应 用 








程 


国 只 提供 用 户 所 需 
国 让 初学 者 尽快 转变 为 中 级 用 户 
国 尽 可 能 地 预防 错误 ， 如 出 错 也 应 友 


图 精简 和 优化 交互 与 任务 流程 ， 让 最 复杂 的 软件 清晰 易 信 
加 为 支持 特定 行 


为 而 设计 


厅 》 我 们 需要 








善 处 理 


加 持续 地 改进 和 优化 我 们 的 流程 与 程序 





国 忽略 用 


这 些 原 则 引导 着 我 进行 了 一 个 又 一 个 





"的 某 些 要 求 ， 坚 信 自 
































[ 的 到 


E 想 和 洞察 力 














述 了 设计 一 款 伟大 的 Web 应 用 所 
中 去 。 我 次， 要 想 





的 项 目 ， 证 明和 它们 确实 是 值得 依靠 





的 一 系列 基本 指导 方针 。 通 过 这 些 指 导 方 针 ， 我 们 完全 可 以 实现 极为 易 











省 的 设计 ， 让 用 户 


























Re 











连 


大 的 影响 ， 而 其 
能 地 完美 ， 我 们 








只 需 常识 人 

















i 能 有 效 地 使 用 











我 们 的 产品 。 














1 对 的 各 种 








j 在 这 些 宏观 原则 之 外 ， 对 于 Web 应 用 来 说 ， 每 一 位 用 
串 单独 的 瞬间 构成 。 这 些 瞬 让 
的 每 一 个 瞬间 都 需要 精 ， 
也 需要 为 每 天 下 


























cE 


户 的 体验 都 

















司 对 用 户 与 软件 的 联系 和 感知 都 会 产生 重 
设计 。 为 了 让 这 些 瞬 间 尽 可 
体 的 独特 的 设计 问题 找寻 解 


决 办 法 。 所 以 在 本 书 中 ， 我 们 探究 了 30 多 个 微观 原则 ， 它 们 能 帮助 你 解 








决 从 页 














看 布局 到 社区 网 络 交 互 ， 

















可 能 发 生 





一 一 





而 在 所 有 这 些 下 








昌 








ing the Obvious 





里 所 讨论 





隐藏 着 一 个 简单 而 又 基本 的 真 到 





的 每 一 个 问题 。 


E。 我 在 本 书 和 















































的 每 





个 原 则 、 型 


要 条 件 ， 它 是 任何 设计 项 目的 绝对 核心 : 


Design- 





EE 仿 和 想法 都 深 深 植 根 于 这 个 必 
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设计 即 传达 。 要 想 设计 出 伟大 的 体验 ， 我 们 必须 成 为 伟大 的 传达 者 。 
传达 其 他 所 有 一 切 


贯穿 本 书 始终 ， 我 们 一 直 着 眼 于 改善 各 个 瞬间 。 从 第 一 印象 到 最 终 印 象 ， 
从 拖 放 操作 到 发 布 更 新 ， 它 们 构成 了 用 户 使 用 Web 应 用 所 得 到 的 最 终 体 
验 。 我 们 探究 了 帮助 人 类 与 Web 应 用 交互 的 各 种 原则 和 理念 。 我 们 帮助 
他 们 分 析 、 判 断 、 从 过 失 中 恢复 ， 甚 至 在 他 们 改变 主意 或 者 离 去 之 后 仍 
然 保持 关注 。 我 们 帮助 他 们 获得 时 向、 形成 思路 、 加 深 记忆 、 养 成 习惯 、 
产生 信赖 、 获 得 灵感 ， 并 且 感 觉 自 己 有 成 效 。 


作为 设计 师 ， 我 们 在 设计 每 一 个 交互 时 都 会 面临 各 种 挑战 。 我 们 需要 知 
道人 们 在 网 络 中 是 如 何 交 互 的 ， 是 什么 让 他 们 热爱 或 异 恨 一 季 产 品 。 我 
们 需要 知道 何 时 何 处 应 该 使 用 何 种 设计 思路 、 了 解 最 好 的 实践 方法 和 流 
行 趋势 、 学 习 如 何 更 好 地 表述 。 而 最 重要 的 ， 我 们 还 需要 知道 如 何 让 一 
球 软 件 的 每 一 个 细节 都 容易 理解 ， 这 样 用 户 才 能 实现 他 们 的 目标 ， 而 相 
对 的 ， 我 们 也 能 实现 自己 的 目标 。 


为 了 接受 挑战 ， 设 计 师 在 大 量 的 设计 方法 和 理论 基础 上 加 以 各 种 变化 和 
改进 ， 并 且 提 出 了 无 数 的 设计 文档 、 流 程 图 、 图 表 以 及 其 他 所 有 你 能 想 
象 到 的 资料 ， 力 图 控制 最 终 的 结果 。 


然而 ， 我 们 并 没有 魔法 子弹 能 自动 命中 目标 。 想 让 我 们 的 作品 比 其 他 的 
更 好 ， 这 其 中 也 没有 捷径 。 没 有 哪个 方法 可 以 一 直 遵 循 ， 没 有 完美 的 设 
计 文 档 ， 也 没有 可 以 随时 采集 天 才 想 法 的 魔 树 。 为 了 调整 和 精炼 自己 的 
能 力 以 达到 成 功 ， 我 们 在 前 进 的 过 程 中 可 以 一 百 万 次 地 改变 设计 方法 、 
变换 使 用 的 文件 类 型 ， 或 者 任意 地 进行 其 他 方面 的 改变 。 
而 最 终 ， 它 们 一 点 都 不 重要 。 如 何 才能 得 到 完美 的 设计 一 点 也 不 重要 ， 
因为 这 是 一 个 可 以 重复 的 过 程 。 正 如 刚才 所 说 ， 为 了 调整 和 精炼 自己 的 
能 力 以 达到 成 功 ， 我 们 在 前 进 的 过 程 中 可 以 一 百 万 次 地 改变 设计 方法 、 
变换 使 用 的 文件 类 型 ， 或 者 任意 地 进行 其 他 方面 的 改变 。 

但 不 管 怎样 做 ， 我 们 首要 的 任务 是 传达 ， 而 且 这 一 点 从 未 改变 过 。 

我 们 是 其 他 所 有 一 切 的 传达 者 。 不 管 是 设计 应 用 程序 、 演 示 幻 灯 片 、 设 
计 文 档 ， 还 是 餐馆 里 的 酒 单 ， 我 们 的 目标 永远 是 向 用 户 传 达 它 们 是 如 何 
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工作 的 ， 而 他 们 又 外 
为 了 做 到 这 些 ， 我 人 


做 正确 其 实 更 容易 223 
EE 从 中 得 到 什么 ， 以 及 为 什么 它们 很 重要 。 
门 通过 各 种 设计 手法 、 指 示 性 元 素 以 及 其 他 手段 来 传 














达 一 球 应 用 程序 及 寺 




















户 的 奉献 精神 。 


交互 行为 的 目的 、 利 益 和 使 用 方法 。 我 们 通过 颜色 、 





图 像 和 文字 来 传达 情绪 。 我 们 通过 客户 服务 和 高 质量 的 产品 来 传达 对 用 





























不 管 意识 到 与 否 ， 我 们 无 时 无 刻 都 在 传达 各 种 各 样 的 事物 。 而 如 果 我 们 
传达 得 不 错 ， 就 能 收获 尊重 和 忠诚 。 


然而 ， 如 果 我 们 传达 得 很 糟 粹 ， 就 会 收获 相反 的 东西 。 我 们 拿 出 “不 是 


很 优秀 ”的 设计 时 ， 
么 “不 是 很 用 心 ”。 














作为 设计 师 ， 我 们 拿 出 的 设计 必须 能 告诉 用 户 ， 我 们 正在 百分之百 地 用 
心 让 他 们 快乐 ， 正 在 百分之百 地 用 心 确 保 他 们 能 在 我 们 的 产品 中 逗留 ， 
并 且 能 持续 地 发 现价 值 。 











等 于 是 在 向 用 户 传 达 我 们 要 么 “不 是 很 有 能 力 ” 要 















































应 用 本 书 以 及 Designing the Obvious 中 所 讨论 的 原则 ， 将 在 相当 程度 上 大 











助 你 做 到 这 一 点 。 


最 后 我 们 必须 澄清 这 样 一 个 事实 : 所 谓 “做 出 伟大 的 设计 都 很 艰苦 ”的 





























观点 是 一 个 廖 论 。 这 条 雇 论 说 良好 的 传达 都 很 难以 实现 ， 还 说 所 谓 的 简 
单 其 实 是 把 复杂 从 用 户 交 互 这 一 前 端 转移 到 了 后 端 


做 正确 其 实 更 容易 


















































似乎 有 点 违背 常理 ， 
或 精力 反而 会 更 少 。 


让 我 解释 一 下 。 














与 错误 的 讯 县 相 比 ， 传 达 正 确 的 讯 县 所 需要 的 思考 

















我 19 岁 时 陪 一 位 朋 








友 参 加 了 一 个 古典 吉他 的 大 师 培 训 班 。 在 这 种 培训 班 
































中 ， 经 验 丰 富 的 大 师 级 音乐 家 会 对 学 生 的 弹 奏 进 行 指正 ， 并 且 提 供 建议 


帮助 他 们 进步 。 
















































































在 我 上 的 这 个 培训 班 里 面 ， 大 师 是 一 位 经 验 丰 富 而 且 很 著名 的 音乐 家 ， 
弹 奏 得 非常 棒 。 他 的 吉他 似乎 能 吟唱 出 音乐 里 每 一 个 音符 所 包含 的 情感 
细节 ， 令 人 惊异 。 而 我 的 朋友 无 疑 对 自己 可 能 会 受到 批评 而 有 一 些 不 
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A 


女 。 


不 安 转 变 成 他 手指 反常 的 紧张 。 
大 师 注意 到 了 这 一 点 。 而 当 他 指 了 


记 。 他 说 : 


E 我 的 朋友 





和 “吉他 弹 得 不 好 很 难 ， 弹 好 则 非常 容易 。” 


这 人 句 话 让 我 非常 困惑 。 儿 年 来 我 一 直 不 知道 他 的 意思 到 底 是 什么 。 他 就 
像 一 个 巫师 一 样 告诉 了 我 一 些 可 能 了 解 的 最 伟大 的 秘密 ， 却 留 给 我 自己 
































去 琢磨 其 中 的 意思 。 















































如 果 一 位 


态 。 一 种 融入 的 感觉 。 
非常 平稳 ， 他 的 子 
处 。 他 并 不 是 在 弹 奏 音乐 ， 而 是 在 音乐 中 畅 














但 是 最 后 ， 因 为 
吉他 演奏 者 弹 得 很 好 ， 那 是 因为 他 到 达 了 一 种 类 似 禅 的 平静 状 
一 种 高 度 的 集中 。 他 
， 并 且 准 备 从 吉他 指 板 的 一 处 流动 到 另 一 


























是 创造 的 音乐 里 
众 来 说 都 是 如 此 。 
作为 这 种 完美 、 
并 不 是 勉强 在 每 一 个 小 节 中 3 











































































































己 所 知道 的 一 切 都 强 塞 到 音乐 
































空白 能 带 来 4 


、 篮 球 ， 还 有 Web 应 用 (以 及 其 他 很 多 东西 )。 





时 ， 说 的 话 我 永远 也 无 法 访 











己 也 打鼓 ， 我 逐渐 开始 理解 他 想 说 的 了 。 


的 手腕 非常 每 展 ， 他 的 呼吸 


游 。 那 一 刻 他 的 整个 灵魂 只 





。 这 是 一 种 非常 美妙 的 体验 ， 对 弹 奏 者 和 听 


寺 果 ， 吉 他 弹 奏 者 能 通过 更 少 做 到 更 多 。 
满 音 符 ， 他 能 让 音乐 呼吸 。 并 不 是 一 直 试 
图 证 明 自 己 的 灵巧 和 高 超 的 技术 ， 他 知道 那些 没有 弹 奏 的 音符 其 实 和 弹 
奏 出 来 的 音符 一 样 和 
他 并 不 会 把 自 
多 ， 甚 至 更 多 ， 


打鼓 也 是 一 样 。 


























里 。 他 拿 走 的 和 留 下 的 一 样 


E 命 。 













































































用 几 句 话 来 描述 一 段 说 明文 字 ， 远 比 写 上 整 
序 里 只 提供 必需 尼 
要 容易 。 在 页 面 





我 们 能 想到 
空白 ， 也 远 比 把 每 个 角落 都 塞 得 满 满 的 要 容 

















人 们 使 用 这 样 的 应 用 程序 ， 远 比 使 用 那些 腾 

















整 一 大 段 要 容易 。 在 应 用 程 
的 一 切 细 校 末节 都 添加 进去 




















门 全 塞 进来 要 容易 。 


肿 的 程序 要 容易 。 多 余 的 特 
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导 方 针 的 信息 ， 我 


最 后 的 补充 




















实际 用 途 。 








F 多 关于 可 用 性 的 研究 资料 、 大 量 关 于 设计 方法 和 指 
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性 、 复 杂 的 交互 还 有 时 旷 的 界面 小 工具 ， 它 们 更 多 地 是 在 炫耀 开 发 者 的 
技术 ， 而 不 是 服务 于 


今天 ， 在 网 络 上 有 讨 





门 还 有 各 种 机 会 通过 网 络 社 区 和 电子 邮件 获取 专家 建 








议 。 网 络 的 历史 发 





























但 最 重要 的 是 ， 存 在 着 一 个 简单 的 事实 ， 就 像 我 那 位 弹 吉 他 的 朋友 那样 ; 
做 好 比 做 坏 要 更 加 容易 。 


























展 到 了 现 阶 段 ， 我 们 无 法 再 为 差劲 的 设计 找到 理 



































要 想 取 得 成 功 ， 你 只 需要 留意 自己 要 传达 的 讯号 ， 并 且 充 满 热情 地 去 好 


好 传达 它们 。 绪 果 其 他 所 有 一 切 都 会 纷 至 省 来 。 







































































通过 留意 所 要 传达 的 讯 奶 ， 你 的 目标 将 变 成 想 办 法 如 何 只 花 最 少 的 努力 
去 完成 传达 。 通 常 来 说 ， 你 做 得 最 少 的 那 种 方法 其 实 就 是 最 正确 的 解决 
方案 。 

我 希望 在 为 瞬间 而 设计 里 面 所 讲述 的 这 些 故事 能 帮助 你 做 到 这 些 。 


最 后 的 补充 


我 们 每 个 人 都 必须 
同 的 个 体 。 必 须 了 





利 情况 。 必 须 注 意 





















































开辟 自己 的 道路 ， 去 领会 是 什么 让 我 们 成 为 彼此 不 
解 自 己 的 局 限 、 力 量 、 独 特 的 癖好 以 及 激情 等 。 必 


须 注意 我 们 是 如 何 思考 和 行动 的 、 如 何 与 同事 交往 ， 以 及 如 何 应 对 不 




















我 们 是 如 何 设 计 ， 并 且 找 到 更 好 的 办 法 来 改进 ， 不 








管 这 些 方法 是 来 
们 的 环境 、 工 作 所 
能 力 。 最 后 还 必须 
进行 设计 。 




















于 人 研究、 人 工 观测 还 是 大 量 的 实践 。 还 必须 考虑 我 


使 用 的 工具 ， 还 要 了 解 这 些 东西 是 如 何 影响 我 们 的 
留意 我 们 生活 的 各 个 方面 ， 这 样 才能 为 不 同 的 个 体 




















不 管 你 怎么 做 到 这 些 ， 最 重要 的 是 在 生活 、 工 作 以 及 设计 中 你 一 直 留 意 
着 。 这 样 成 功 才 会 接 中 而 来 。 





再 重申 一 过 ， 好 的 设计 是 
好 运气 ， 但 大 多 数 时 候 则 不 能 。 这 是 一 条 漫漫 长 路 ， 





你 第 一 次 尝试 就 能 



































大 堆 差 的 设计 演变 进化 的 结果 。 有 些 























口 
AAA 











继续 前 进 。 
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时 候 ， 


要 你 坚持 走 下 去 最 终 一 定 会 发 现 自己 一 直 在 寻找 的 东西 。 无 论 如 何 ， 
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这 才 是 我 最 


跟随 你 自己 的 福 社 。 找 到 你 自己 的 禅 。 设 计 属 于 你 自己 的 瞬间 。 


Wah 





要 的 建议 。 





























米 米 米 米 米 





如 果 和 希望 继续 阅读 我 关于 设计 的 思想 ， 请 访问 我 的 博客 : www.rhjrnet/ 
theblog。 如 果 和 希望 深入 了 解 我 的 公司 Miskeeto， 请 访问 www.miskeeto.com。 
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